多列布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样
- 常用属性：
a) column-count: 属性设置列的具体个数
b) column-width: 属性控制列的宽度
c) column-gap: 两列之间的缝隙间隔
d) column-rule: 规定列之间的宽度、样式和颜色
e) column-span: 规定元素应横跨多少列(n:指定跨n列 all:跨所有列)
- 多列的用法：
<style>
*{
padding: 0;
margin: 0;
}
.wrapper{
width:1054px;
padding:20px;
margin:0 auto;
font-family: "微软雅黑",Arial;
/*设置以几列的方式显示*/
column-count:2;
/*指定列宽*/
column-width:500px;
/*指定列与列之间的间距*/
column-gap: 50px;
/*指定列与列之间间隙的样式*/
/*column-rule:2px dotted red*/
/*相对应下面的三个属性*/
column-rule-color:red;
column-rule-style:dotted;
column-rule-width:2px;
}
.wrapper > h4{
column-span: all;
}
</style>
- 列高度的平衡：
如果设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列
max-height: 300px;
原文地址：https://www.cnblogs.com/bbc66/p/9434217.html