Div浮動問題：看起來div自動清除：左

Question

我有一系列的圖像，所有這些圖像都有width:400px，但有不同的高度。他們在以下容器：

#content {width:808px;margin:0 auto;margin-top:100px}

所有的奇數圖像有以下代碼：

{float:left;clear:left;margin:2px}

所有甚至圖像有以下代碼：

{float:right;clear:right;margin:2px}

理論上不應該每個ODD圖像都在左邊，堆疊在彼此的上面，每個偶像都應該放在右邊堆疊在一起。

相反，我得到這個：

就好像一些右邊的圖像被clear:left或clear:both，對不對？

有什麼想法？

感謝

Answer 1

舉個例子來說，這個代碼：

<div>Airplane</div> 
<div style="float: left;">Symba</div><div style="float:right;">Chewbacca(?)</div> 

你不會想到楚巴卡的頂部，飛機頂部排隊（？）！它將與Symba的頂端排隊。

Symba has float：left，所以被迫在飛機下面。無論飛機是否漂浮或不是無關緊要。

我已經看到了通過將float：left應用於所有元素，然後在頁面加載完成後使用一些Javascript來清理空白區域的方式來做你想做的佈局（float：left on its won不要這樣做，因爲你可能已經注意到了）。我不喜歡這種解決方案我自己，但我能想到的唯一的另一種方法是在兩列圖像預先進行排序，並把它們相應的分割：

<div style="float:left"> 
<div>Myst(?)</div> 
<div>Airplane</div> 
<div>Symba</div> 
</div> 
<div style="float:right"> 
<div>Coastline</div> 
<div>Painter</div> 
<div>Chewbacca(?)</div> 
</div> 

但如果你想列始終高度相等，除非你事先知道圖像的高度，並且可以根據這些信息將其放入列中，否則這可能對您不適用。 （循環，保持當前高度的計數，並且總是添加到較短的列中;類似的東西）。