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

想要使用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>

效果图:

c6244b0f9789fb54046d395678cdaca.png

注意:如果未指定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; 
}

效果图:

09b6d4911c09607d9eb9eb5ccd8e06e.png

浏览器支持:

● 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将内容分成几列显示?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏