CSS3之多列布局

LemonYan
1,630 阅读4分钟

一、多列布局的属性

多列布局的核心属性：

  • columns：集成column-width和column-count两个属性，用于实现元素多列布局效果。
  • column-width：定义每列列宽度
  • column-count：定义分列列数
  • column-gap：定义列间距
  • column-rule：定义列边框
  • column-span：定义多列布局中，子元素跨列效果
  • column-fill：控制每列的列高效果

二、多列布局基本属性介绍

1、多列布局复合属性

columns是一个复合属性，列宽和列数，可以同时定义多列的列数和每列的列宽。 语法：columns:<column-width>||<column-count> 参数说明：

  • column-width：定义多列中每列的宽度
  • column-count：定义多列中的列数

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多列布局</title>
	<style>
		*{
			padding:0;
			margin:0;
		}
		.wrapper{
			width:40em;
			margin-left: auto;
			margin-right: auto;
			border:solid #ccc 1px;
			padding:5px;
			/*多列布局*/
			columns:9em 4;
		}
		h1{
			font-size:1.5em;
			margin-bottom: 1em;
		}
		p{
			margin-bottom: 1em;
			text-indent: 2em;
			line-height: 1.625;
			font-size:.7em;
		}
	</style>
</head>
<body>
	<div class="wrapper">
		<h1>测试文本</h1>
		<p>网易科技讯....</p>
		<h3>微软能否拯救windows8</h3>
		<p>这个问。。。</p>
		<p>不过，看起</p>
		<p>设计融合。。</p>
		<p>测试文本测试文本</p>
		<p>测试文本测试文本</p>
		<p>测试文本测试文本</p>
	</div>
</body>
</html>

2、多列布局列宽属性

多列布局列宽column-width属性类似于给列定义一个最小宽度。 语法：column-width:auto|<length> 参数说明：

  • auto：默认值，如果值为auto或没有显示设置，元素多列的列宽将由其它属性来决定。
  • length：使用固定值来设置元素的列宽度，主要是由数值和长度单位组成，只能是正值。

3、多列布局列数属性

column-width属性主要用来给元素指定想要的列数和允许的最大列数。 语法：column-count：auto|<integer> 参数说明：

  • auto：默认值，表示元素只有一列
  • integer：正整数值，定义元素的列数，取值为大于零的整数。

列数=（容器宽度-间距）/列间距 浏览器对于小数的取舍正常情况下都是四舍五入，但这里对于列数的取值，是去余取整。 例如：列数=（40em-2em）/10em=38em/10em=3.8这里取得是3列。

如果元素显显式设置了列数，不管元素的宽度是多少或者间距多少，总是显示固定的列数。

4、多列布局列间距属性

column-gap只能设置列与列之间的间距。 语法：column-gap：normal|<length> 参数说明：

  • normal：默认值，normal一般情况下相当于1em
  • length：由浮点数字和单位标识符组成的长度值，主要用来设置列与列之间的距离，不能为负值。

示例：

.wrapper{
	width:40em;
	margin-left: auto;
	margin-right: auto;
	border:1px solid #ccc;
	padding:5px;
	-moz-column-count:4;
	-webkit-column-count:4;
	column-count:4;
	-moz-column-gap:2em;
	-webkit-column-gap:2em;
	column-gap:2em;
}

column-gap与column-width等参数之和大于多列元素总宽度时，会导致列被撑破，并将当前列数减1来显示，列宽自动调节到适当的列宽。

5、多列布局列边框样式属性

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

语法： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 参数说明：

  • column-rule-width：定义边框的宽度，默认值medium，接受任意浮点数，不接受负值，可用关键词medium、thick、thin。
  • column-rule-style：定义列边框样式，默认值为none，可用关键词none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
  • column-rule-color：定义列边框的颜色，接受所有颜色的值。
多列列边框与列间距总结
  • column-gap类似于盒模型中的margin和padding属性，具有一定的空间位置，当其值过大时会撑破布局，浏览器会自动根据相关参数重新计算列数，知道容器无法容纳时，显示为一列为止。
  • column-rule类似于盒模型中的border属性，主要用来设置列边框的宽度、列边框的样式和列边框的颜色，并且column-rule不具有任何空间位置，同时在Z轴介于background和content之间，不会撑破容器。

6、多列布局列跨列属性

column-span主要用来定义一个分列元素中的子元素能跨列多少。 语法：column-span:none|all 参数说明：

  • none：默认值，不跨越任何列
  • all：表示元素跨越所有列，并定位在列的Z轴之上

7、多列布局列高度属性

column-fill用来定义多列中每一列的高度是否统一。 语法：column-fill:auto|balance 参数说明：

  • auto：默认值，各列的高度随其内容的变化自动变化
  • balance：各列的高度根据内容最多的一列高度进行统一
avatar
文章
阅读
粉丝