css3 -) 多栏布局

当前位置 : 首页 > 网页制作 > CSS > css3 -) 多栏布局

css3 -) 多栏布局

来源: 作者: 时间:2016-01-25 10:01
在进行多栏布局时,使用bootstrap的栅 26684;系统可以很轻松的实现效果,其实css3本身也提供了多兰布局的功能。比如,我们在一个section标签内填充了很多内容,同时希望内容能够显示成

在进行多栏布局时,使用bootstrap的栅格系统可以很轻松的实现效果,其实css3本身也提供了多兰布局的功能。

比如,我们在一个section标签内填充了很多内容,同时希望内容能够显示成三列,那么可以通过如下css来实现(使用chrome)。


设置分栏的数量

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

根据宽度分栏

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

其中remem不同,它所表示的字体大小是相对于全局的。

如果能够在分栏空隙中显示一些标记,页面会显得更加美观,它的实现也非常简单。


定义分栏间隙

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

    参考

    《实战 开发与设计》

    Tag:
网友评论

<