css3 -> 多栏布局
浏览数：14 /
时间：2015年06月09日
在进行多栏布局时，使用bootstrap的栅格系统可以很轻松的实现效果，其实css3本身也提供了多兰布局的功能。
比如，我们在一个section标签内填充了很多内容，同时希望内容能够显示成三列，那么可以通过如下css来实现（使用chrome浏览器）。
设置分栏的数量
section {
-webkit-column-count: 3;
}
根据宽度分栏
section {
-webkit-column-width: 25rem;
}
其中rem与em不同，它所表示的字体大小是相对于全局的。
如果能够在分栏空隙中显示一些标记，页面会显得更加美观，它的实现也非常简单。
定义分栏间隙
section {
-webkit-column-width: 25rem;
-webkit-column-rule: 3px solid #8B2101;
-webkit-column-gap: 2rem;
其中column-rule可以拆分成如下规则:
column-rule-width: 3px;column-rule-style: solid;column-rule-color: #8B2101;
如果不定义分栏的高度，内容会被平均分配，但是如果指定了高度，还可以执行分栏的填充方式。
分栏内容的填充方式
section {
column-width: 20rem;
column-rule: 3px solid #8B2101;
column-gap: 2rem;
height: 85rem;
column-fill: balance;
}
column-fill的值除了balance,还有另一个值auto
如何跨栏
在表格中我们可以使用colspan=2来配置内容扩展的列数，当然分栏内容也可以通过如下方式来实现。
section img {
column-span: all;
margin: 1rem auto;
}
其它特性
告诉浏览器你想要在哪里开始分栏。- break-before
- auto\always\avoid\column\avoid-column
- break-after
- auto\always\avoid\column\avoid-column
- break-inside
- auto\always\avoid\column\avoid-column
参考
《CSS实战 开发与设计》
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
