css - 将包含图像的 DIV float 到文本右侧，其中容器必须是流动的

Question

我需要将图像 float 到某些文本的右侧。 Div 和文本都包含在许多 DIV 中，我无法更改 HTML，只能更改 CSS。

我认为这很容易，但出于某种原因我无法弄清楚。包含元素只能是固定宽度，因为这是一个响应式网站。

http://codepen.io/anon/pen/cgznB

<div>
  <div>
    <div>
      <p>Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. Here is some text. </p>
   </div>
  </div>
</div>



<div class="image-cont">
  <div>
    <div>
      <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRMFGfVlnjbzD3dekwhIZ8yPYCzYuKInbzRNc9hU5doTPsPI51a" />
    </div>
  </div>
</div>

.image-cont {
  float: right;
}
div {
  display: inline;
}

更新 - 我可以通过以下方式实现这一点，但我宁愿图像是全宽的，而只有文本是流畅的。

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}

Answer 1

您可以使用此 CSS 来解决您的问题。

.image-cont {
  float: left;
  width:30%;
}
div > div > div {
  float: left;
  width:70%;
}