如何将img {float-left;}收缩宽度p元素放在它旁边？

Question

我的console-handler包含<div>，<img>和<h2>。 <p>的左半部分应该用img完全填充，我希望右半部分为<div>和<h2>。

问题是：浮动<p>不会缩小<img>的宽度，因此<p>位于padding-left之后，导致<img>该文字与<p>相比过于紧张。

我该如何解决这个问题？我创建了一个jsfiddle here下面的屏幕截图更好地说明了我的意思。

html是

<img>

，CSS是

<div class='featured left'>
    <img src='http://www.spss-tutorials.com/img/turtle-left.png'>
    <h2 class='ol'><a href="#">Why I love my Turtle!</a></h2>
    <p>My turtle, Harry Turtle, is simply the friendliest and most clever turtle in the world!
      <a href='http://www.dumpert.nl/mediabase/2013731/8ff0c33d/harry_turtle.html'>
Read more.</a>
    </p>
</div>

Answer 1

为您的图片添加边距以推到一边或使您p成为浮动元素（尽管这可能会使布局更难控制）。

img { margin-right: 10px; }

但是，您当前的代码中的图片未设置为float: left;。

您看到这个的原因是因为floating元素不再像标准block元素那样行事。它的大小（和 blockiness ）仅推送其他块的内容。实际的块将忽略该元素（除非该块也是浮动的）。它很古怪，但它确实有意义。因此，浮动元素需要提供自己的余量来推掉更多常规块的内容。

＆＃13;

＆＃13;

img {
  float: left;
  margin-right: 10px;
}

＆＃13;

<img src="" width="100" height="100" alt="So, this is an image." />
<p>Lorem Ipsum Dolor Sit Amet.</p>

＆＃13;

＆＃13;

＆＃13;

Answer 2

添加此样式：

div p {
  display: table;
}

这似乎创建了一个新的线框上下文，它解决了这个问题。

Fiddle