这是一些示例代码:http: //jsfiddle.net/cKTtu/
我希望具有类的项目left
在左侧浮动,而具有类的项目right
在右侧浮动(在左侧的旁边)。如果没有包装器 div,我怎样才能实现它?
这是一些示例代码:http: //jsfiddle.net/cKTtu/
我希望具有类的项目left
在左侧浮动,而具有类的项目right
在右侧浮动(在左侧的旁边)。如果没有包装器 div,我怎样才能实现它?
你的左右浮动没有排列,但 LinkinTED 的原因(在他的评论中链接的 JSFiddle 中)是浮动 DIV 的声明中的顺序很重要。浮动元素,就像非浮动元素一样,首先被定位为页面上从上到下“流”的一部分。然后将它们从流中的自然位置取出并水平向左或向右移动,直到它们遇到其包含元素的边缘或另一个浮动元素的边缘。
因此,当您拥有三个依次float:left
声明属性的 DIV 时,它们自然会一个接一个地定位,并且位于 float:right
在它们之后声明的两个 DIV 之前。当它们被拉出流向左浮动时,它们仍然会保持这个顺序。通常,三个左浮动元素会水平堆叠(第二个浮动到第一个的边缘),但由于每个元素也具有clear:left
属性,因此后续的 DIV 将被强制到自己的行上。只有在三个左浮动的DIV定位后,两个右浮动的DIV才会出现,因为它们在自然(预浮动)流中出现较晚。
另一方面,LinkinTED 的 JSFiddle 以左右交替的顺序声明 DIV,因此在自然流中它们会出现交错。然后当每个右浮动 DIV 被拉出流向右浮动时,它可以与左浮动 DIV 共享一行,因为还没有其他左浮动 DIV 需要出现。