css如何实现元素两端对齐：使用column(多列布局)

column也是是css3的属性，意思是多列布局，使用column来实现两端对齐也十分简单，只需要设置模块的个数跟column的列数一致即可，不过它的自动适应方式跟使用box-pack还有有点差别，并不是很标准，像列与列的间距暂无法定义为百分比。值得高兴的是目前支持所有高级浏览器，对IE10的支持也良好，而IE9及以下版本不支持，webapp开发中，对于不需要兼容winphone7手机(IE9)的需求来说，可以充分发挥column的强大作用~

关于column的使用方法，w3school的有相关教程：http://www.w3school.com.cn/css3/css3_multiple_columns.asp

实例：html代码

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

css代码

*{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;
}

本文由 bigwei08028 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
最后编辑时间为: 2018-02-23 09:00 Friday