如何使用CSS将内容分成几列显示？

最新推荐文章于 2024-07-10 23:34:24 发布

weixin_45587319

最新推荐文章于 2024-07-10 23:34:24 发布

阅读量313

点赞数 1

分类专栏： css 文章标签： css

原文链接：https://www.html.cn/qa/css3/10404.html

版权

css 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

想要使用CSS将div元素的内容分成多列来显示，可以使用columns属性。columns属性一个简写属性，可以设置列数和列宽，用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性，希望对大家有所帮助。

columns 属性是一个简写属性，一次可以采用多个值；用于设置列宽和列数。

语法：

columns: column-width columns-count | auto;

属性值：

●　auto：这会将列宽和列计数值设置为其浏览器默认值。

示例：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
		body {
			text-align: center;
		}
		
		.demo {
			-webkit-columns: auto auto;
			/* Chrome, Safari, Opera */
			-moz-columns: auto auto;
			/* Firefox */
			columns: auto auto;
		}
	</style>
</head>
<body>
<h1>column属性</h1>
<div class="demo">
	<h2>Welcome to here！</h2> 
	这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！
	这是一段测试文本！这是一段测试文本！这是一段测试文本！这是一段测试文本！
	<p><strong>这是一段测试文本！</strong>
		<p>
			测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
			测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！
			测试文本！测试文本！
		</p>
		<p>
			一段测试文本！一段测试文本！一段测试文本！一段测试文本！一段测试文本！
			一段测试文本！一段测试文本！一段测试文本！
		</p>
		<p>
			测试文本！测试文本！测试文本！测试文本！测试文本！
		</p>
		<p>
			一段测试文本！一段测试文本！一段测试文本！一段测试文本！一段测试文本！
			一段测试文本！一段测试文本！一段测试文本！
		</p>
		<p>测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</p>
	</p>
</div>
</body>
</html>

效果图：

注意：如果未指定column-width和column-count中的任何值，则浏览器默认将其值设置为auto。

●　column-width和columns-count：用于使用整数值指定列宽和列数。

.demo {
	-webkit-columns: 60px 5; 
    /* Chrome, Safari, Opera */ 
    -moz-columns: 60px 5; 
    /* Firefox */ 
    columns: 60px 5; 
}

效果图：

浏览器支持：

●　Chrome 50.0, 4.0 -webkit-

●　Edge 10.0

●　Firefox 52.0, 9.0 -moz-

●　Safari 9.0, 3.1 -webkit-

●　Opera 37.0, 15.0 -webkit- 11.1

如何使用CSS将内容分成几列显示？

“相关推荐”对你有帮助么？