Div Float问题：似乎div自动清除：left

Question

我有一系列图像，所有图像都有width:400px，但高度不同。它们位于以下容器中：

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

所有ODD图像都有以下代码：

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

所有EVEN图像都具有以下代码：

{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>

你不会指望Chewbacca（？）的顶部与飞机的顶部对齐！它将与Symba的顶部对齐。

Symba浮动：左，因此被迫飞机下方。无论飞机是否漂浮都无关紧要。

我已经看到了做你想要的布局，通过将float：left应用到所有元素，然后在页面完成加载后使用一些Javascript来整理空白区域（float：left on their 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>

但是如果你希望列总是相等的高度，这可能对你不起作用，除非你事先知道图像的高度，并且可以根据它将事物放入列中。 （循环，保持当前高度的计数，并始终添加到较短的列;类似的东西。）