码迷,mamicode.com
首页 > 其他好文 > 详细

利用column-width属性设置多栏布局

时间:2016-12-18 15:34:29      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:back   16px   div   idt   ges   长度   技术   images   属性   

css样式设置为:

div{
background:blanchedalmond;
margin:0 auto;
width:1230px;
-moz-column-width:400px;
-webkit-column-width:400px;

}

在利用column-width属性设置多栏布局是可能会出现这样的情况:每列长度为600px

 

技术分享

与设置的样式相悖,出现这种情况的原因是column-gap的最小值为1em即列与列之间的最小距离为16px;当列的长度为400px ,如果将整个div分为3列时,column-gap的值为15px小于16px ,所以整个div不能分为3列,所以整个div分为2列,为了满足div的长度,所以导致每列的长度会变大

利用column-width属性设置多栏布局

标签:back   16px   div   idt   ges   长度   技术   images   属性   

原文地址:http://www.cnblogs.com/lhq1717/p/6194406.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!