多列布局（column）

一.多列属性：

Properties 属性	CSS Version 版本	Inherit From Parent 继承性	Description 简介
columns	css3	无	设置或检索对象的列数和每列的宽度。复合属性
column-width	CSS3	无	设置或检索对象每列的宽度
column-count	CSS3	无	设置或检索对象的列数
column-gap	CSS3	无	设置或检索对象的列与列之间的间隙
column-rule	CSS3	无	设置或检索对象的列与列之间的边框。复合属性
column-rule-width	CSS3	无	设置或检索对象的列与列之间的边框厚度。
column-rule-style	CSS3	无	设置或检索对象的列与列之间的边框样式。
column-rule-color	CSS3	无	设置或检索对象的列与列之间的边框颜色。
column-span	CSS3	无	设置或检索对象元素是否横跨所有列。
column-fill	CSS3	无	设置或检索对象所有列的高度是否统一。
column-break-before	CSS3	无	设置或检索对象之前是否断行。
column-break-after	CSS3	无	设置或检索对象之前是否断行。
column-break-inside	CSS3	无	设置或检索对象内部是否断行。

1.columns复合属性；（队列宽度和列数的复合属性）

	<style>
			.big{
				-moz-columns:200px 2 ;/*火狐的Gecko内核*/
				-webkit-columns:200px 2 ;/*谷歌webkit内核*/
				-ms-columns:200px 2 ;/*IE的Trident内核*/
				columns: 200px 2 ;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
			<div>列2</div>
			<div>列3</div>
			<div>列4</div>
			<div>列5</div>
			<div>列6</div>
		</div>
	</body>

2.column-width：队列的宽度；

<style>
			.big{
				-moz-column-width:100px;/*火狐的Geock的内核*/
				-ms-column-width:100px;/*Ie的Trident的内核*/
				-webkit-column-width: 100px;/*谷歌内核*/
				column-width: 100px;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
			<div>列2</div>
			<div>列3</div>
			<div>列4</div>
			<div>列5</div>
			<div>列6</div>
		</div>

原文链接： http://caibaojian.com/multi-column.html

column-count

设置或检索对象的列数·

column-count：<integer> | auto

<integer>：用整数值来定义列数。不允许负值
auto：根据column-width自定分配宽度

原文链接： http://caibaojian.com/multi-column.html

column-gap

设置或检索对象的列与列之间的间隙·

column-gap：<length> | normal

<length>：用长度值来定义列与列之间的间隙。不允许负值
normal：与font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推

column-rule

原文链接：http://caibaojian.com/multi-column.html

设置或检索对象的列与列之间的边框厚度。·

column-rule-width：<length> | thin | medium | thick

<length>：用长度值来定义边框的厚度。不允许负值
medium：定义默认厚度的边框。
thin：定义比默认厚度细的边框。
thick：定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

none：无轮廓。column-rule-color与column-rule-width将被忽略
hidden：隐藏边框。
dotted：点状轮廓。
dashed：虚线轮廓。
solid：实线轮廓
double：双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值
groove：3D凹槽轮廓。
ridge：3D凸槽轮廓。
inset：3D凹边轮廓。
outset：3D凸边轮廓。

.big{
				-ms-columns:200px 3;/*ie的Trident内核*/
				-moz-columns: 200px 3;/*火狐的Geock内核*/
				-webkit-columns: 200px 3;/*谷歌内核*/
				columns: 200px 3;
				-ms-column-gap:20px;
				-moz-column-gap:20px;
				-webkit-column-gap;20px;
				column-gap:20px;
				column-rule: 2px solid red;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<div class="big">
			<div>列1</div>
			<div>列2</div>
			<div>列3</div>
			<div>列4</div>
			<div>列5</div>
			<div>列6</div>
		</div>

原文链接： http://caibaojian.com/multi-column.html

设置或检索对象元素是否横跨所有列。·

column-span：none | all

none：不跨列
all：横跨所有列

原文链接： http://caibaojian.com/multi-column.html

设置或检索对象所有列的高度是否统一。·

column-fill：auto | balance

auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一

ect.....

http://caibaojian.com/multi-column.html

多列布局（column）

column-count

column-gap

猜你喜欢