css - 如何阻止浮动图像下的文本流动

Question

https://codepen.io/anon/pen/GevgKR?editors=1100

我有一个网格样式布局，在较小的屏幕上变成卡片布局

网格布局是用 flex 创建的。在卡片布局中，所有元素都向左浮动。布局开始时有一个图像，因此图像下方的文本会变形。

如何停止在图像下方换行的文本。

我想我需要在左侧为图像创建一种假列。我可以用 flex 做到这一点，但这会影响桌面视图上的布局，就像用 flex 所做的那样

*{
  font-family: sans-serif;
  font-size: 14px;
}

.wrapper{
  max-width: 1366px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}


.grid{
  &__row{
    display: flex;
  }

  &__cell{
    border: 1px solid lightgrey;
    flex: 1;
  }
}


@media(max-width: 700px){


  .grid{
    overflow: auto;
    border: 1px solid lightgrey;
    padding: 8px;
    &__row{
      display: block;
      &-header{
        display: none;
      }
    }

    &__cell{
      border: none;
      float: left;

      &-image{
        height: auto;
        clear: right;
      }
    }
  }  
}

标签： cssflexbox