想要使用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
网友评论