禁用围绕浮动图像的文本环绕答案

【问题标题】：Disable text wrapping around floating images禁用围绕浮动图像的文本环绕
【发布时间】：2011-04-10 16:06:05
【问题描述】：

我有一个如下所示的页面：

<div>
<p> This text appears above the image</p>
<!-- I know the <div><p> construction is superfluous. I was just trying things out -->
</div>

<div style="display: block; width: 100%; clear: both;">

   <img class="left" alt="Img1" src="img1.jpg" alt="" width="242" height="181" />
   <img class="right" alt="Img2" src="img2.jpg" alt="" width="242" height="181" />

</div>

<div>
<p> This text appears between those images. I want it to display below them.</p>
</div>

每张图片都有这个 CSS：

.left {
   float: left;
   margin-right: 5px;
}
.right {
   float: right;
   margin-left: 5px;
}

我怎样才能使这两个图像彼此相邻浮动，但文本不会在这些图像之间换行？

当前页面的ASCII艺术：

my text my text my text my textmy text
my text my text my textmy text my text

--------- text is wrapping ---------
|  IMG  | text is wrapping |  IMG  |
--------- text is wrapping --------- 

my text my text my text my textmy text
my text my text my textmy text my text

我想要的美丽的 ASCII 艺术：

my text my text my text my textmy text
my text my text my textmy text my text

---------                  ---------
|  IMG  |                  |  IMG  |
---------                  --------- 

text is wrapping text is wrapping text
is wrapping

my text my text my text my textmy text
my text my text my textmy text my text

【问题讨论】：

标签： css css-float

【解决方案1】：

我会推荐这个：

<div style="overflow: hidden; width: 100%;">
    <!-- floated images -->
</div>

在我的世界里它有点干净:-)

【讨论】：

简单易行，我只花了一个小时试图摆弄各种 CSS 属性。非常感谢！

【解决方案2】：

你必须在你的 image-div 之后插入另一个 div，这会清除两个浮点数......就像这样：

<div>
   <!-- Your images go here -->
</div>
<div style="clear: both;"></div>
<p>your text</p>

编辑：请参阅我的评论，将清除 div 放置在包装图像的 div 内会有什么好处。

【讨论】：

您也可以为您的图像添加 div inside div，这将确保包裹图像的 div 具有与图像相同的高度（例如，如果您想要使用背景颜色）

【解决方案3】：

清除包含浮动对象的div 将不起作用。

试着把它放在你的图片div和文本容器div之间：

<div class="clear"></div>

并像这样定义clear 类：

.clear { clear:both; }

P.S 在获得第二次投票之后，在我最终得到与我的回答相反的评论之前：清除包含 div 应该工作，但就我的经验而言没有；在非常干净的 HTML 中有一些情况我可以说它确实如此，但总的来说，我不知道这是否与设计师过去使用的特定技术有关，我们必须用容器后的独立 div。

【讨论】：