css3 -> 多栏布局

在进行多栏布局时。使用bootstrap的栅格系统能够非常轻松的实现效果，事实上css3本身也提供了多兰布局的功能。

比方，我们在一个

section

标签内填充了非常多内容。同一时候希望内容可以显示成三列，那么可以通过例如以下css来实现（使用chrome浏览器）。

设置分栏的数量

section {
-webkit-column-count: 3;
}

依据宽度分栏

section {
-webkit-column-width: 25rem;
}

当中

rem

与

em

不同，它所表示的字体大小是相对于全局的。

假设可以在分栏空隙中显示一些标记，页面会显得更加美观，它的实现也很easy。

定义分栏间隙

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-beforeauto\always\avoid\column\avoid-columnbreak-afterauto\always\avoid\column\avoid-columnbreak-insideauto\always\avoid\column\avoid-column

參考

《CSS实战 开发与设计》