CSS 禁用文字环绕浮动图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5612997/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable text wrapping around floating images
提问by poundifdef
I have a page which looks like this:
我有一个看起来像这样的页面：
<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>
Each image has this CSS:
每个图像都有这个 CSS：
.left {
float: left;
margin-right: 5px;
}
.right {
float: right;
margin-left: 5px;
}
How can I make it so that those two images float next to each other, but text does not wrap in between those images?
我怎样才能让这两个图像彼此相邻浮动，但文本不会在这些图像之间换行？
ASCII art of the current page:
当前页面的 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
Beautiful ASCII art of what I desire:
我想要的美丽的 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
回答by janhartmann
I would recommend this:
我会推荐这个：
<div style="overflow: hidden; width: 100%;">
<!-- floated images -->
</div>
Its a bit cleaner in my world :-)
它在我的世界里更干净:-)
回答by Michael Rose
You have to insert another div after your image-div, which clears the two floats... like this:
你必须在你的图像 div 之后插入另一个 div，它会清除两个浮点数......像这样：
<div>
<!-- Your images go here -->
</div>
<div style="clear: both;"></div>
<p>your text</p>
Edit:See my comment, what would be the advantage of placing the clearing div inside the div wrapping the images.
编辑：请参阅我的评论，将清除 div 放在包装图像的 div 内有什么好处。
回答by Grant Thomas
Clearing the divcontaining floating objects won't work.
清除div包含的浮动对象将不起作用。
Try placing this between your images divand the text container div:
尝试将其放在您的图像div和文本容器之间div：
<div class="clear"></div>
And define the clearclass as so:
并将clear类定义如下：
.clear { clear:both; }
P.S After getting a second up-vote on this and before I eventually get the comment stating contrary to my answer: clearing the containing divshouldwork, but just in my experience doesn't; there are a few cases in very clean HTML where I can say it did, but in general, and I don't know if this was to do with a particular technique designers have used in the past, we've had to clear with a standalone div after the container.
PS 在获得第二次投票之后，在我最终得到与我的答案相反的评论之前：清除包含div应该有效，但仅凭我的经验没有；在一些非常干净的 HTML 中，我可以说确实如此，但总的来说，我不知道这是否与设计人员过去使用的特定技术有关，我们必须用容器后的独立 div。
