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

比方,我们在一个section标签内填充了非常多内容。同一时候希望内容可以显示成三列,那么可以通过例如以下css来实现(使用chrome浏览器)。

设置分栏的数量

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

依据宽度分栏

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

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

假设可以在分栏空隙中显示一些标记,页面会显得更加美观,它的实现也很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-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 -> 多栏布局的更多相关文章

  1. CSS3使用盒模型实现三栏布局

    本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...

  2. IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局

    CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...

  3. CSS3多栏布局

    CSS3多栏布局 分栏数: column-count:auto|num: auto为默认值,表示元素只有一列.num取值为大于0的整数 每栏宽度: column-width:auto|<leng ...

  4. CSS布局 - 三栏布局

    CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...

  5. 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects

    今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...

  6. 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。

    前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...

  7. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  8. CSS3学习系列之布局样式(一)

    多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...

  9. CSS3学习系列之布局样式(二)

    使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...

随机推荐

  1. PHP利器-WAMPServer

    为了配置memcacheAdmin,牵涉到搭建PHP的环境,使用的是WAMPServer,安装之后,需要对apache进行配置, 端口,需要将wamp\bin\apache\Apache2.2.21\ ...

  2. iOS开发之iOS程序偏好设置(Settings Bundle)的使用

    目录[-] 1.添加设置项 2.设置的控件 3.编辑设置项的文件 4.在程序中获取Settings 和写入Settings 添加UI 5.实现读取设置和保存代码 在Android手机上, 在某个程序里 ...

  3. html多行注释方法

    Html单行:<!-- -->多行:<!-- -->javascript单行://多行:/* */Vbscript单行:'多行:'ASP <% %>中: 单行:'  ...

  4. The Unified Modeling Language(UML)

    统一过程建模语言UML 统一过程建模语言UML是一种标准的可视化建模语言,使用在:  业务建模和类似的过程 居于软件系统的分析.设计.和实现 UML 是一门通用语言,提供给业务分析员,软件架构师和开发 ...

  5. Stanford CoreNLP--常量定义

    在运行Stanford CoreNLP过程中会用到tokenize,pos等参数,这些以常量形式定义在edu.stanford.nlp.pipeline.Annotator中,具体如下: /** * ...

  6. mysql优化案例

    MySQL优化案例 Mysql5.1大表分区效率测试 Mysql5.1大表分区效率测试MySQL | add at 2009-03-27 12:29:31 by PConline | view:60, ...

  7. VisualStudio替换所有空行

    [一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3371620.html] Ctrl+Shift+H 查找内容\r\n\r\n   //如果要替换 ...

  8. 第三章 传奇的开始--Delphi(附读书笔记)

    第三章 传奇的开始--Delphi "是惊世之作的Delphi让Borland重新站了起来,没有当初的Delphi,就没有今日的Borland!" "是Turbo Pas ...

  9. 使用@ResponseBody 出现错误Could not find acceptable representation

    org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representatio ...

  10. LiBsvm用于多分类时训练模型参数含义

    The 'svmtrain' function returns a model which can be used for futureprediction.  It is a structure a ...