CSS3 之 多列布局

1. 设置列宽度

使用 column-width 属性定义多列布局中每列的宽度,可单独使用,也能和其他多列布局属性组合使用;
column-width 属性语法格式如下所示:
column-width:[ <length> | auto]
属性值 <length>是由浮点数和单位标识符组成的长度值,不可为负值;auto 根据浏览器计算自动设置;
例子1:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>多列布局属性</title>
		<style>
			body{
				-moz-column-width: 350px;
				column-width: 350px;
			}
			h1{
				color: #888;
				background-color: #ffaa00;
				padding: 10px 12px;
				font-size: 16px;
				text-align: center;
				padding: 12px;
			}
			h2{
				font-size: 16px;
				text-align: center;
			}
			p{
				color: #888;
				font-size: 16px;
				line-height: 180%;
				text-indent: 2em;
			}
		</style>
	</head>
	<body>
		<h1>渡江云三犯·西湖清明</h1>
		<h2>吴文英〔宋代〕</h2>
		<p>
			羞红颦浅恨,晚风未落,片绣点重茵。旧堤分燕尾,桂棹轻鸥,宝勒倚残云。千丝怨碧,渐路入、仙坞迷津。肠漫回,隔花时见,背面楚腰身。
		</p>
		<p>
			逡巡。题门惆怅,堕履牵萦,数幽期难准。还始觉、留情缘眼,宽带因春。明朝事与孤烟冷,做满湖、风雨愁人。山黛暝,尘波澹绿无痕。 
		</p>	
	</body>
</html>

20220525column-width 指定了要显示的多列布局每列的宽度;

2. 设置列数

column-count属性能指定多列布局的列数,不需要通过列宽度自动调整列数;
column-count属性的语法格式如下所示:
column-count:auto | <integer>
属性值<integer>表示值是一个整数,用来定义栏目的列数,取值大于 0 的整数,不可以为负值
auto 属性值表示根据浏览器计算值自动设置;

例子2:

20220525


版权声明:本文为weixin_43960383原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。