绝对将盒子放在左右两侧的方法更好吗？

Question

有没有更好的方法可以像这样绝对地将一堆盒子左右定位？也许使用flexbox？

http://jsfiddle.net/frank_o/zpv4jbmx/

HTML：

<div class="box first">
     <h1>Lipsum</h1>
</div>
<div class="box second">
     <h1>Lipsum</h1>
</div>
...

CSS：

.box {
    position: absolute;
    background: blue;
    color: white;
}
.box.first, .box.third, .box.fifth {
    left: 20px;
}
.box.second, .box.fourth, .box.sixth {
    right: 20px;
}
.box.first {
    top: 20px;
}
.box.second {
    top: 120px;
}
...

Answer 1

由于我们要更好＆＃34;，您可以使用floating和CSS even/odd规则，如下所示：

HTML

<div class="box">
     <h1>Lipsum</h1>
</div>
<div class="box">
     <h1>Lipsum</h1>
</div>
<div class="box">
     <h1>Lipsum</h1>
</div>
<div class="box">
     <h1>Lipsum</h1>
</div>
<div class="box">
     <h1>Lipsum</h1>
</div>
<!-- As many as you'd like... -->

CSS

.box {
    background: blue;
    color: white;
}
.box:nth-child(odd){
    float: left;
    clear: both;
}
.box:nth-child(even){
    float: right;
    clear: both;
}

结果相同，但实现的可扩展性更高。

http://jsfiddle.net/9mcgvqLj/