浮动图像不计入 DIV 宽度，我该怎么做？答案

【问题标题】：A floated image does not count toward DIV width, how can I make it so?浮动图像不计入 DIV 宽度，我该怎么做？
【发布时间】：2012-06-28 02:00:09
【问题描述】：

以下代码：

<div>
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

呈现一个带有文本的 div 容器，并在左侧呈现一个浮动图像。伟大的。其中包含的文本还尽可能多地扩展 div，同时将文本保持在一行中（除非另有说明）。但是，对于浮动图像，div 容器的宽度不会尽可能地扩大，并且会根据图像的宽度过早地换行文本。

也就是说，如果浮动图片是200像素宽，那么div右端“200像素”的文字都会被撞到下一行。就好像 DIV 容器没有看到多余的文本，并且将动态 div 宽度设置得太短！

...我确实意识到，这是设计使然，仅仅是因为图像是“浮动的”，而不是块/内联元素。（至少，我认为我的措辞是正确的......？）

那么，我怎样才能在不求助于 (ick...) 表的情况下实现我想要的呢？

【问题讨论】：

标签： css html css-float

【解决方案1】：

浮动元素从页面流中移除，不会导致封闭元素展开。

看看here。该教程讨论了使用 overflow 属性封闭浮动元素。

【讨论】：

大声笑。哇，我在 3 年前写了这个答案，它刚刚被接受。哈哈，谢谢！

【解决方案2】：

将包装 div 也浮动到左侧，它会正确包装内容：

<div style="float: left;">
    <img src="" style="float: left;">
    <p>Lorem Ipsum...</p>
</div>

这不是一个完美的解决方案，因为浮动包装 div 具有明显的副作用，但它是确保 div 正确包装浮动内容的可靠方法。

如果浮动 div 给您带来任何问题，您可以将其包装在另一个应该解决问题的 div 中。

【讨论】：

【解决方案3】：

失败导致浮动：left 需要明确的宽度

【讨论】：

【解决方案4】：

这里可能会发生很多事情。当我将您的代码放在没有其他代码的 HTML 页面的正文标记中时，它可以正常工作。这可能是因为您的页面类型定义。我的是：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

这也可能是因为你有一个包含迫使这个 div 变短。确保您解决问题的唯一方法是通过设置其宽度样式来强制您的区域具有特定宽度。将代码所在的 Div 标签更改为 float:left 很可能无法解决您的问题。我检查它只是为了确定自己并没有产生您想要的结果。

【讨论】：

【解决方案5】：

除了浮动包含的 div 之外，您还可以添加“宽度：100%；溢出：隐藏；”包含 div 的样式。这将迫使它展开以包含浮动的 div。更多讨论请见here。

【讨论】：

【解决方案6】：

您还应该确保元素显示为块：

img#my_element {display:block;}

【讨论】：