在进行多栏布局时。使用bootstrap的栅格系统能够非常轻松的实现效果，事实上css3本身也提供了多兰布局的功能。
比方，我们在一个section标签内填充了非常多内容。同一时候希望内容可以显示成三列，那么可以通过例如以下css来实现（使用chrome浏览器）。
设置分栏的数量
section {
-webkit-column-count: 3;
}
依据宽度分栏
section {
-webkit-column- 25rem;
}
当中rem与em不同，它所表示的字体大小是相对于全局的。
假设可以在分栏空隙中显示一些标记，页面会显得更加美观，它的实现也很easy。
定义分栏间隙
section {
-webkit-column- 25rem;
-webkit-column-rule: 3px solid #8B2101;
-webkit-column-gap: 2rem;
当中column-rule能够拆分成例如以下规则:
column-rule- 3px;column-rule-style: solid;column-rule-color: #8B2101;
假设不定义分栏的高度。内容会被平均分配，可是假设指定了高度。还能够运行分栏的填充方式。
分栏内容的填充方式
section {
column- 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
- autoalwaysavoidcolumnavoid-column
- break-after
- autoalwaysavoidcolumnavoid-column
- break-inside
- autoalwaysavoidcolumnavoid-column
參考
《CSS实战 开发与设计》