元素两段对齐

关于元素实现两段对齐的效果

<div class="demo">
    <a class="link" href="#none">10元</a>
    <a class="link" href="#none">20元</a>
    <a class="link" href="#none">30元</a>
    <a class="link" href="#none">50元</a>
</div>

/* 说明： display:box定义布局为盒模型后，可使用盒模型下的box-pack:justify属性 */
.demo{ width: 90%; margin: 0 auto; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-pack:justify; -webkit-justify-content:space-between; -ms-flex-pack:justify; justify-content:space-between; }

.demo a{ width:100px; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; }

效果如下

关于flex
http://www.w3cplus.com/css3/a-guide-to-flexbox-new.html

还有一种是使用css的分栏，column。

/* 说明： 1.column-count定义了对象的列数,例子中有4个模块，那么定义为4列 2.column-gap定义了对象中列与列的间距，间距不能设置为百分比 */
.demo{ width: 90%;margin: 10px auto; -webkit-column-count:4; -moz-column-count:4; column-count:4; -webkit-column-gap:20px; -moz-column-gap:20px; column-gap:20px; }

.demo a{ width:100px; display:block; height:44px; line-height:44px; text-align:center; border:1px solid #428cc8; color:#666; }