Div Float问题：似乎div自动clear:left

Question

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

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

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

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

所有偶数图像都有以下代码：

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

理论上不应该每个奇数图像都在这左侧，彼此堆叠，每个偶数图像应位于右侧，彼此堆叠。

相反，我得到的是：

就好像右侧的一些图像是 clear:left 或 clear:both，对吧？

有什么想法吗？

谢谢

Answer 1

以这段代码为例：

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

您不会期望 Chewbacca(?) 的顶部与 Airplane 的顶部对齐！它将与 Symba 的顶部对齐。

Symba 具有向左浮动，因此被迫位于飞机下方。飞机是否漂浮已经不重要了。

我见过一些布局可以满足您的要求，即对所有元素应用 float:left，然后在页面加载完成后使用一些 Javascript 来整理空白区域（float: left 本身无法做到这一点） ，正如您可能已经注意到的那样）。我自己不喜欢这个解决方案，但我能想到的唯一其他选择是将图像预先排序为两列，并相应地分割它们：

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

但如果您希望列始终具有相等的高度，那可能不会为您工作，除非您提前知道图像的高度，并且可以根据该高度将内容放入列中。 （循环，记录当前高度，并始终添加到较短的列；类似的事情。）