如何在没有包装的情况下左右浮动物品?

时间:2013-06-25 19:49:10

标签: css position

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

我希望类left的项目在左侧浮动,而类right的项目在右侧浮动(左侧的项目旁边)。如果没有包装器div,我怎样才能实现呢?

1 个答案:

答案 0 :(得分:1)

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

因此,当你有三个DIV,其中float:left属性一个接一个地声明时,它们将自然地一个接一个地定位,并且在它们之后声明的两个float:right DIV之前。当他们被拉出流动向左浮动时,他们仍然会保持这个顺序。通常,三个左浮动元素将水平堆叠(第二个浮动元素将浮动到第一个边缘),但由于每个元素也具有clear:left属性,因此后续DIV被强制放在自己的行上。只有在三个左浮动DIV定位后,两个右浮动DIV才会出现,因为它们会出现在自然(预浮动)流中。

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

有关浮动力学的更多信息,请查看this pagethis page