Float divs到两边

时间:2011-10-13 08:40:47

标签: html css css-float

假设我有一堆div,它们有“左”类或“右”类。是否有可能使这些div在容器的两侧浮动,就像有一列“左”div和一列“右”div一个在另一个下对齐。 div的顺序是随机的。

我不是在寻找双栏布局。 ;)

1 个答案:

答案 0 :(得分:5)

请参阅: http://jsfiddle.net/thirtydot/qdZWh/

<强> HTML:

<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>

<强> CSS:

div {
    width: 50px;
    height: 50px;
    outline: 1px dashed #666
}
.left {
    float: left;
    clear: left;
    background: yellow
}
.right {
    float: right;
    clear: right;
    background: #0f0
}