css动态div宽度

Question

我需要一个占用其父级全宽的div，除非前面有一个Image。因为那时我希望图像在同一条线上。我试过将图像浮动到左侧，这使得div中的文本在我不想要的图像下面。 以下是一些希望清理图像的图片：

带图像的东西：

没有图像的东西：

Answer 1

你可以使用display:table（注意：这是不使用表格进行布局）

.wrapper {
  background: lightgray;
  display: table;
}
.wrapper img ~ p {
  display: table-cell;
  vertical-align: top;
}

<div class="wrapper">
  <p>
    First Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text
    some Text some Text some Text some Text some Text
  </p>
</div>

<div class="wrapper">
  <img src="http://lorempixel.com/300/200" />
  <p>
    First Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text some Text
    some Text some Text some Text some Text some Text
  </p>
</div>