清除浮動按下

我注意到一個惱人的事情與頁面的相反兩側的競爭浮游物。清除浮動按下

我有兩個jsFiddles來說明我的問題：

在擺弄例如，你可以看到，左邊的圖像是在頂部，並在同一水平綠色的塊。在這種情況下，綠色和藍色的div是一個容器內：

<div class="floatContainer" style="float: right"> 
    <div>Green Div</div> 
    <div style="float: right; clear: right;"> 
     Blue Div 
    </div> 
</div>

我有此佈局的問題是，文本不緊緊包裹的藍色塊，因爲它的包裝容器周圍來代替。

在小提琴B示例中，我設法通過不浮動容器並單獨浮動綠色和藍色div來正確完成包裝。爲了得到綠色以下的藍色div，它當然有一個「清晰：正確」的標籤。

但是，您可以看到左側的圖像現在被按下，以便它在與藍色div相同的y座標處開始，這不是我想要的。

那麼，有沒有辦法讓文本很好地圍繞綠色和藍色div分別包裹，同時仍然讓最左邊的圖像正確定位？這看起來像一個CSS錯誤，因爲它肯定不是我所期望的行爲。

謝謝。

來源

2013-06-25 Taylor Hadden

移動.floatContainer裏面的.content所以它是在<img>之後，所以它不會被清除。

<div class="content"> 
    <img class="right" src="http://lorempixel.com/150/100" width="150" height="100"> 
    <div class="floatContainer"> 
     <div class="rightFloat">Stuff and things are long</div> 
     <div class="rightFloat second">More Things</div> 
    </div> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit

http://jsfiddle.net/gdFjy/3/

來源

2013-06-25 21:08:32

我會做到這一點，但我不知道是否該圖像將存在與否。這是一個博客頁面，我想確保設計允許任何圖像分類。如果這是我唯一的選擇，那麼我將會使用第一個示例。 –

清除浮動按下

回答

相關問題