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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用column-width属性设置多栏布局相关的知识,希望对你有一定的参考价值。

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属性设置多栏布局的主要内容,如果未能解决你的问题,请参考以下文章

flex多栏布局

flex多栏布局

CSS3之多列布局

布局—column(属性)

CSS3多列布局模块属性:

多列布局(column)