在进行多栏布局时。使用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. 例行性工作排程 (crontab)

    1. 什么是例行性工作排程 1.1 Linux 工作排程的种类: at, crontab 1.2 Linux 上常见的例行性工作2. 仅运行一次的工作排程 2.1 atd 的启动与 at 运行的方式: ...

  2. 文件操作 - NSFileManager

    iOS的沙盒机制,应用只能访问自己应用目录下的文件.iOS不像android,没有SD卡概念,不能直接访问图像.视频等内容.iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒内.默认 ...

  3. 模型 - 视图 - 控制器(MVC)详解

    模型视图控制器(MVC)一个相当实用且十分流行的设计模式.作为一位称职码农,你不可能没听说过吧. 不幸的是它难以让人理解. 在本文中,我将给出我认为是MVC的最简单的解释,以及为什么你应该使用它. 什 ...

  4. 第 17 章 责任链模式【Chain of Responsibility Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> 中国古代对妇女制定了“三从四德”的道德规范,“三从”是指“未嫁从父.既嫁从夫.夫死从子”,也就是说一个女性,在没有结婚的 ...

  5. django开发总结:

    一,关于setting目录中的“DEBUG” DEBUG=False 把DEBUG从True改成False后就会出现(必需指定404和500错语页面,如上图的目录结构)找不到页面的错误.原因是DEBU ...

  6. NCPC 2012 Galactic Warlords

    湖南大学的oj上有这套比赛: 这题是个简单的计算几何,首先去掉重复的边,然后判断是否全部平行: 代码: #include<cstdio> #define maxn 105 using na ...

  7. MinGW中的头文件路径级环境变量设置

    整理自 MinGW中的头文件路径   C头文件目录%MINGW_PATH%/include下有头文件,里面有strcpy等c函数的声明. C++头文件目录%MINGW_PATH%/lib/gcc/mi ...

  8. TortoiseSVN下载,安装,配置,常用操作 svn教程

    一. 首先在百度搜索并下载 TortoiseSVN 推荐从官网下载,软件分为32位和64位版本,下载时请根据自己的系统位数进行下载:

  9. webview调用javascript脚本无反应

    最近遇到一个问题:在html中有一段javascript脚本定义了一个方法,在使用webview.loadUrl("javascript:方法名()")时方法未执行,后来 查资料发 ...

  10. Spring-boot 配置Aop获取controller里的request中的参数以及其返回值

    首先在你的Maven的pom文件里加入aop的依赖: <dependency> <groupId>org.springframework.boot</groupId> ...