css - 将包含图像的 DIV 浮动到容器必须是流体的文本右侧

Question

我需要将图像浮动到某些文本的右侧。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%;
}

Answer 2

这个呢？

.container {
   height: auto;
   overflow: hidden;
}

.right {
    width: 180px;
    float: right;
    background: #aafed6;
}

.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;
}​​