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-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 -> 多栏布局的更多相关文章
- CSS3使用盒模型实现三栏布局
本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏 ...
- IT兄弟连 HTML5教程 CSS3属性特效 CSS3分栏布局
CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充.这种新语法能够让WEB开发人员轻松的让文本呈现多列显示.我们知道,当一行文字太长时,读者读起来就比较费 ...
- CSS3多栏布局
CSS3多栏布局 分栏数: column-count:auto|num: auto为默认值,表示元素只有一列.num取值为大于0的整数 每栏宽度: column-width:auto|<leng ...
- CSS布局 - 三栏布局
CSS布局技术可谓是前端技术中最基础的技术,就是因为基础,所以我认为要更加熟练,深入的去掌握,去梳理. 一. 传统 ---> 浮动实现的三栏布局 采用浮动实现的三栏布局有以下特点及注意事项: · ...
- 多种css3时尚侧栏菜单展开显示效果Off-Canvas Menu Effects
今天我们想分享多种css3时尚侧栏菜单展开显示效果.侧边栏应用广泛,我们之前已经产生了一些效果灵感.风格演变,今天我们要展示一套新的灵感的现代效果.不同的布局和菜单的同步转换和页面可以让一切看起来更有 ...
- 记一道css面试题 : 三栏布局两边宽度固定,中间宽度自适应,并且布局随屏幕大小改变。
前几天面试时有道css题没做出来,回来好好学习一番后把其记录下来. 题目是这样的:左中右三栏布局,左右两栏宽度固定,左右两栏的宽度为200像素,中间栏宽度自适应.当屏幕小于600px时,3栏会分别占用 ...
- CSS3弹性盒模型布局模块介绍
来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...
- CSS3学习系列之布局样式(一)
多栏布局 使用float属性或position属性的缺点: 使用float属性或position属性进行页面中的简单布局的例子. <!DOCTYPE html> <html lang ...
- CSS3学习系列之布局样式(二)
使用盒布局 在CSS3中,通过box属性来使用盒布局,例子如下: <!DOCTYPE html> <html lang="en"> <head> ...
随机推荐
- PHP利器-WAMPServer
为了配置memcacheAdmin,牵涉到搭建PHP的环境,使用的是WAMPServer,安装之后,需要对apache进行配置, 端口,需要将wamp\bin\apache\Apache2.2.21\ ...
- iOS开发之iOS程序偏好设置(Settings Bundle)的使用
目录[-] 1.添加设置项 2.设置的控件 3.编辑设置项的文件 4.在程序中获取Settings 和写入Settings 添加UI 5.实现读取设置和保存代码 在Android手机上, 在某个程序里 ...
- html多行注释方法
Html单行:<!-- -->多行:<!-- -->javascript单行://多行:/* */Vbscript单行:'多行:'ASP <% %>中: 单行:' ...
- The Unified Modeling Language(UML)
统一过程建模语言UML 统一过程建模语言UML是一种标准的可视化建模语言,使用在: 业务建模和类似的过程 居于软件系统的分析.设计.和实现 UML 是一门通用语言,提供给业务分析员,软件架构师和开发 ...
- Stanford CoreNLP--常量定义
在运行Stanford CoreNLP过程中会用到tokenize,pos等参数,这些以常量形式定义在edu.stanford.nlp.pipeline.Annotator中,具体如下: /** * ...
- mysql优化案例
MySQL优化案例 Mysql5.1大表分区效率测试 Mysql5.1大表分区效率测试MySQL | add at 2009-03-27 12:29:31 by PConline | view:60, ...
- VisualStudio替换所有空行
[一篮饭特稀原创,转载请注明出自http://www.cnblogs.com/wanghafan/p/3371620.html] Ctrl+Shift+H 查找内容\r\n\r\n //如果要替换 ...
- 第三章 传奇的开始--Delphi(附读书笔记)
第三章 传奇的开始--Delphi "是惊世之作的Delphi让Borland重新站了起来,没有当初的Delphi,就没有今日的Borland!" "是Turbo Pas ...
- 使用@ResponseBody 出现错误Could not find acceptable representation
org.springframework.web.HttpMediaTypeNotAcceptableException: Could not find acceptable representatio ...
- LiBsvm用于多分类时训练模型参数含义
The 'svmtrain' function returns a model which can be used for futureprediction. It is a structure a ...