css - CSS图片库浮动BUG

Question

这是新的，我制作的存档页面有问题。这似乎是一个相当直接的浮动 div 图片库......但由于某种原因，整个 div 中随机出现了一堆换行符。我认为这可能是 Cufon 或 IE.JS 等的问题，但我禁用了所有 JS 并且它仍然存在错误。

在这里发布代码似乎有点长，我已经抛出了一堆不必要的 div 和明确的修复，但似乎没有任何效果。在我弄清楚之后，我会发布并组织一份适当的报告。

Answer 1

由于某些标题比其他标题长，因此需要换行，从而使 div 更高。然后浮动将“挂在”这些更高的 div 上。这本身不是一个错误，它只是浮​​动的工作方式。

 --- --- ---
 |1| |2| |3|
 --- | | ---
     --- ---
         |4|
         ---
 ---
 |5|
 ---

避免这个问题的最好方法是给每个 div 设置一个高度。

或者，您可以通过向每个 first/forth/seventh/etc div 添加适当的类来使每行的第一个 div 为“clear: left”。

编辑：详细说明这是如何浮动的：每个 div 都尝试与前一个 div 放在同一行，尽可能向左浮动。如果线上没有空间，它会先被推下，然后离开。在上面的示例中，4 将被 3 向下推，然后它会尽可能向左浮动，击中 2。5 被 4 向下推，然后尽可能向左浮动。