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将内容分成几列显示?的详细内容,更多请关注易知道|edz.cc其它相关文章!