CSS3 之多列布局

最新推荐文章于 2024-05-14 22:40:21 发布

菇毒

最新推荐文章于 2024-05-14 22:40:21 发布

阅读量464

点赞数 1

本文链接：https://blog.csdn.net/weixin_43960383/article/details/125793911

版权

web 前端学习同时被 2 个专栏收录

90 篇文章 4 订阅

订阅专栏

CSS

34 篇文章 1 订阅

订阅专栏

多列布局

1. 设置列宽度
2. 设置列数

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>

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

2. 设置列数

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

例子2：

20220525

菇毒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 之多列布局

是由浮点数和单位标识符组成的长度值，不可为负值；auto根据浏览器计算自动设置；属性定义多列布局中每列的宽度，可单独使用，也能和其他多列布局属性组合使用；表示值是一个整数，用来定义栏目的列数，取值大于0的整数，不可以为。属性能指定多列布局的列数，不需要通过列宽度自动调整列数；auto属性值表示根据浏览器计算值自动设置；...
复制链接

扫一扫