css基础（十）－－多列布局

34.多列布局

columns：<column-width> || <column-count>

例如：

要显示2栏显示，每栏宽度为200px，代码为：

columns: 200px 2;

 

column-width:

在定义属性列宽的时候能够单独使用或者和多列属性中其他属性配合使用

column-width: auto | <length>

auto表示：元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。

length：使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

 

column-count:

指定想要的烈列数，和允许的最大列数

column-count：auto | <integer>

auto：只能有一个列，且依靠浏览器计算自动设置

 

column-gap:

设置列与列之间的间距：

column-gap: normal || <length>

normal：默认值为1em（如果字号是px，默认值为你的font size）

 

column-rule:

定义列与列之间的边框宽度，边框样式，边框颜色。类似border属性。但column－rule不占用空间任何位置，在列与列之间改变其宽度不会改变任何列位置

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

例如：

column-rule: 2px dotted green;

column-span:

定义一个分列元素的子元素能夸多少列。有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

column-span: none | all

column-span:all;

效果：

 

再例如：

让所有偶数段落和标题，跨越所有列

.columns {

  padding: 5px;

  border: 1px solid green;

  width: 900px;

  margin: 20px auto;

  

  -webkit-column-count:3;

  -moz-column-count:3;

  -o-column-count:3;

  -ms-column-count:3;

  column-count:3;

  

  -webkit-column-gap: 2em;

  -moz-column-gap: 2em;

  -o-column-gap: 2em;

  -ms-column-gap: 2em;

  column-gap: 2em;

  

  -webkit-column-rule: 3px gray solid;

  -moz-column-rule: 3px gray solid;

  -o-column-rule: 3px gray solid;

  -ms-column-rule: 3px gray solid;

  column-rule: 3px gray solid;

}

 

p:nth-child(2n){

  -webkit-column-span:all;

  -moz-column-span:all;

  -o-column-span:all;

  -ms-column-span:all;

  column-span:all;

}

效果：