如何使用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 答疑

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏