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> ...
随机推荐
- 例行性工作排程 (crontab)
1. 什么是例行性工作排程 1.1 Linux 工作排程的种类: at, crontab 1.2 Linux 上常见的例行性工作2. 仅运行一次的工作排程 2.1 atd 的启动与 at 运行的方式: ...
- 文件操作 - NSFileManager
iOS的沙盒机制,应用只能访问自己应用目录下的文件.iOS不像android,没有SD卡概念,不能直接访问图像.视频等内容.iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒内.默认 ...
- 模型 - 视图 - 控制器(MVC)详解
模型视图控制器(MVC)一个相当实用且十分流行的设计模式.作为一位称职码农,你不可能没听说过吧. 不幸的是它难以让人理解. 在本文中,我将给出我认为是MVC的最简单的解释,以及为什么你应该使用它. 什 ...
- 第 17 章 责任链模式【Chain of Responsibility Pattern】
以下内容出自:<<24种设计模式介绍与6大设计原则>> 中国古代对妇女制定了“三从四德”的道德规范,“三从”是指“未嫁从父.既嫁从夫.夫死从子”,也就是说一个女性,在没有结婚的 ...
- django开发总结:
一,关于setting目录中的“DEBUG” DEBUG=False 把DEBUG从True改成False后就会出现(必需指定404和500错语页面,如上图的目录结构)找不到页面的错误.原因是DEBU ...
- NCPC 2012 Galactic Warlords
湖南大学的oj上有这套比赛: 这题是个简单的计算几何,首先去掉重复的边,然后判断是否全部平行: 代码: #include<cstdio> #define maxn 105 using na ...
- MinGW中的头文件路径级环境变量设置
整理自 MinGW中的头文件路径 C头文件目录%MINGW_PATH%/include下有头文件,里面有strcpy等c函数的声明. C++头文件目录%MINGW_PATH%/lib/gcc/mi ...
- TortoiseSVN下载,安装,配置,常用操作 svn教程
一. 首先在百度搜索并下载 TortoiseSVN 推荐从官网下载,软件分为32位和64位版本,下载时请根据自己的系统位数进行下载:
- webview调用javascript脚本无反应
最近遇到一个问题:在html中有一段javascript脚本定义了一个方法,在使用webview.loadUrl("javascript:方法名()")时方法未执行,后来 查资料发 ...
- Spring-boot 配置Aop获取controller里的request中的参数以及其返回值
首先在你的Maven的pom文件里加入aop的依赖: <dependency> <groupId>org.springframework.boot</groupId> ...