css3 多列布局

标签：

一、多列布局——Columns
 　　　　语法:columns：<column-width> || <column-count>
　　　　　　1、 column-width: 主要用来定义多列中每列的宽度 column-width: auto | <length>
　　　　　　　　length: 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。
　　　　　　2、 column-count:主要用来定义多列中的列数 column-count：auto | <integer>
　　　　　　　　integer: 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
　　　　　　　　例:columns: 200px 2;
　　 　　　　3、列间距column-gap
　　　　　　　　　　语法：column-gap: normal || <length>
　　　　　　　　　　normal默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。
　　　　　　　　　　length ：此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。
　　　　　　　　　　例：column-gap: 2em;
　　　　　　4、列表边框column-rule
　　　　　　　　定义：column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。
　　　　　　　　　　　　简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，
　　　　　　　　　　　　在列与列之间改变其宽度不会改变任何列的位置。
　　　　　　　　　　　　语法：column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
　　　　　　　　例：column-rule: 2px dotted green;
　　　　　　5、跨列设置column-span
　　　　　　　　定义：column-span主要用来定义一个分列元素中的子元素能跨列多少。
　　　　　　　　语法：column-span: none | all
　　　　　　　　none： 此值为column-span的默认值，表示不跨越任何列。
　　　　　　　　all：这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。
　　　　　　　　例如：column-span:all;

css3 多列布局

标签：

原文地址：http://www.cnblogs.com/jalja/p/4528228.html