css3 -> 多栏布局

标签：css3   分栏   

在进行多栏布局时，使用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实战 开发与设计》

css3 -> 多栏布局,布布扣,bubuko.com

css3 -> 多栏布局

标签：css3   分栏   

原文地址：http://blog.csdn.net/feelang/article/details/27973741