css - 如何在没有包装的情况下将元素左右浮动？

Question

这是一些示例代码:http://jsfiddle.net/cKTtu/

我希望类 left 的元素漂浮在左边，类 right 的元素漂浮在右边(在左边的旁边)。如果没有包装 div，我如何实现它？

Answer 1

你的左右浮动没有对齐，但 LinkinTED 的(在他从他的评论链接的 JSFiddle 中)的原因是 float DIV 声明中的顺序很重要。 float 元素，就像非 float 元素一样，首先被定位为页面上从上到下“流”的一部分。然后将它们从流中的自然位置移出并水平向左或向右移动，直到它们遇到包含它们的元素的边缘或另一个 float 元素的边缘。

因此，当您有三个声明了 float:left 属性的 DIV 时，它们自然会一个接一个地定位在两个 float:right< 之前 在它们之后声明的 DIV。当它们被拉出流向左漂浮时，它们仍然会保持这个顺序。通常，三个向左浮动的元素会水平堆叠(第二个会 float 到第一个的边缘)，但由于每个元素都具有 clear:left 属性，因此后续的 DIV 是被迫走上自己的路线。只有在三个左浮动的 DIV 定位后，两个右浮动的 DIV 才会出现，因为它们在自然(预 float )流中出现得较晚。

另一方面，LinkinTED 的 JSFiddle 以左右交替的顺序声明 DIV，因此在自然流中它们会出现交错。然后，当每个向右浮动的 DIV 被拉出流向右浮动时，它可以与向左浮动的 DIV 共享一条线，因为还没有其他向左浮动的 DIV 需要出现。

有关 float 机制的更多信息，请查看 this page和 this page .