禁用文字環繞周圍浮動圖像

Question

我有一個網頁，它看起來像這樣：

<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 

Answer 1

我會推薦這：

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

它在我的世界有點清潔:-)

Answer 2

清除div含漂浮物將無法正常工作。

試試你的圖像div和文本容器div之間放置這樣的：

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

，並定義clear類像這樣：

.clear { clear:both; } 

_{PS獲得的第二贊成票後這和之前我最終得到的評論說與我的回答相反：清除包含div守ld工作，但只是在我的經驗沒有;在非常乾淨的HTML中，有一些情況我可以說是這樣做的，但總的來說，我不知道這是否與設計人員過去使用過的特定技術有關，我們必須使用容器後的獨立格。}

Answer 3

你要插入你的形象-DIV陸續格，它清除浮點數......這樣的：

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

編輯：見我的意見，這將是把優勢div內的清除div包裹圖像。