<p>模块内的元素之间为&nbsp;分隔，只支持webkit和Gecko内核浏览器</p>
<br />
<div class="demo"><a class="link" href="#none">10元</a>&nbsp;<a class="link" href="#none">20元</a>&nbsp;<a class="link" href="#none">30元</a>&nbsp;<a class="link" href="#none">50元</a>
</div>
<br />
<p>模块内的元素之间为换行符</p>
<br />
<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>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<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>
<br />
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<br />
<div class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></div>
<br />

*{margin:0;padding:0;}
/* 说明： 1.IE中要实现块内单行两端对齐需要使用其私有属性text-align-last:justify配合，text-align-last 要生效，必须先定义text-align 为justify2.line-height:0 解决标准浏览器容器底部多余的空白
*/
.demo{text-align:justify;text-align-last:justify;line-height:0;height:44px;
}
/*说明：模块使用[换行符]或[空格符]后，webkit浏览器中会引起最后一个模块有多余空白，使用font-size:0可清除该空格
*/
@media all and (-webkit-min-device-pixel-ratio:0){
.demo{font-size:0;
}
}/* 说明：1.text-align-last:justify 目前只有IE支持，标准浏览器需要使用 .demo:after 伪类模拟类似效果 2.opera浏览器需要添加 vertical-align:top 才能完全解决底部多余的空白*/
.demo:after{display:inline-block;overflow:hidden;width:100%;height:0;content:'';vertical-align:top;
}
.demo a{width:20%;display:inline-block;height:44px;line-height:44px;text-align:center;border:1px solid #428cc8;color:#666;font-size:16px;margin-bottom:5px;border-radius:3px;background-color:#fefefe;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));color:#666;text-decoration:none;
}

<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>

*{margin:0;padding:0;}
/*说明：display:box定义布局为盒模型后，可使用盒模型下的box-pack:justify属性
*/
.demo{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:20%;display:block;height:44px;line-height:44px;text-align:center;border:1px solid #428cc8;color:#666;font-size:16px;margin-bottom:5px;border-radius:3px;background-color:#fefefe;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));color:#666;text-decoration:none;
}

<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>

*{margin:0;padding:0;}
/* 说明：1.column-count定义了对象的列数,例子中有4个模块，那么定义为4列2.column-gap定义了对象中列与列的间距，间距不能设置为百分比，显得不够灵活
*/
.demo{-webkit-column-count:4;-moz-column-count:4;column-count:4;-webkit-column-gap:20px;-moz-column-gap:20px;column-gap:20px;
}.demo a{display:block;height:44px;line-height:44px;text-align:center;border:1px solid #428cc8;color:#666;font-size:16px;margin-bottom:5px;border-radius:3px;background-color:#fefefe;background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fefefe),color-stop(1,#eee));color:#666;text-decoration:none;
}