CSS3--多列布局

多列布局

columns: <column-width> || <column-count>;//前者为每一列的宽度，后者为总列数

columns: 100px 3;  //表示3栏显示，每栏宽度100px;

兼容性问题，需要添加浏览器前缀

-webkit-columns: 100px 3;  //表示3栏显示，每栏宽度100px;
-moz-columns: 100px 3;  //表示3栏显示，每栏宽度100px；
-ms-columns: 100px 3;  //表示3栏显示，每栏宽度100px；
-o-columns: 100px 3;  //表示3栏显示，每栏宽度100px；
columns: 100px 3;  //表示3栏显示，每栏宽度100px；

columns也是一个复合属性

• column-width
• column-count

column-width

列宽

column-width: none | length;

none表示宽度由column-count来决定。
length表示固定宽度。

column-count

列数

column-count: none | integer;

none,表示只有一列；
integer为整数，表示分为几列。

还可以设置列间距

column-gap

列间距

column-gap: normal | length;

normal表示默认值，为1em,
length表示固定列间距

column-rule

列表边框

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

设置完全跟盒子边框一样

column-rule: 1px solid green;

column-span

设置该元素可以横跨多少列

column-span: none | all;

none表示不横跨，为默认值；
all表示横跨所有列。