想要使用CSS将div元素的内容分成多列来显示,可以使用columns属性。columns属性一个简写属性,可以设置列数和列宽,用于设置分栏模块。下面本篇文章就来给大家介绍一下columns属性,希望对大家有所帮助。
columns 属性是一个简写属性,一次可以采用多个值;用于设置列宽和列数。
语法:
属性值:
● auto: 这会将列宽和列计数值设置为其浏览器默认值。
示例:
效果图:
注意:如果未指定column-width和column-count中的任何值,则浏览器默认将其值设置为auto。
● column-width和columns-count :用于使用整数值指定列宽和列数。
效果图:
浏览器支持:
● 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
可以通过竖向排列的方式,将子div设置为行内块即可。话不多说了,直接上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {border: solid 1px #000}
#main-div {
width: 200px
height: 300px
writing-mode: vertical-lr}
.item {
width: 100px
height: 50px
display: inline-block
background-color: antiquewhite
writing-mode: horizontal-tb}
</style>
</head>
<body>
<div id="main-div">
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
<div class="item">一条内容</div>
</div>
</body>
</html>
效果如下:
这都已经9年了,也就我想到了这个问题的答案,我简直就是个天才,哈哈哈