停用浮动图片周围的文字换行 [英] Disable text wrapping around floating images

问题描述

我有一个页面，看起来像这样：

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>

每张图片都有这个CSS：

Each image has this 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艺术：

ASCII art of the current page:

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艺术：

Beautiful ASCII art of what I desire:

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

推荐答案

我会推荐这个：

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

它在我的世界有点干净： - ）

Its a bit cleaner in my world :-)

这篇关于停用浮动图片周围的文字换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！