多列布局——Columns
为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module)。它主要应用在文本的多列布局方面,这种布局在报纸和杂志上都使用了几十年了,但要在Web页面上实现这样的效果还是有相当大的难度,庆幸的是,CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。
语法:
columns:<column-width> || <column-count>
多列布局columns属性参数主要就两个属性参数:列宽和列数。
|
参数 |
参数说明 |
|
<column-width> |
主要用来定义多列中每列的宽度 |
|
<column-count> |
主要用来定义多列中的列数 |
举例:要显示2栏显示,每栏宽度为200px,代码为:
columns: 200px 2;
到目前为止大部分主流浏览器都对其支持:

多列布局——Columns的更多相关文章
- CSS3之多列布局columns详解
CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- CSS3布局之多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- CSS多列布局
× 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...
- 第 28 章 CSS3 多列布局
学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们 ...
- 多列布局 css3 column属性
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- css3 多列布局记
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...
随机推荐
- php标签云制作——数据表的结构和查询方法
1.数据表的结构: 创建建两张数据表,结构如下: 标签tag表: 文章mood表: 其中mood表中的tag字段,以tag表的id字段+“,”+tag表的id字段, 2.查询方法: 例如:如果需要某篇 ...
- 演示对sys用户和普通用户进行审计的示例
1.确认数据库版本 1对SYS用户审计 1.1配置审计参数 1.2修改liunx日志配置文件 添加以下一列: 1.3 SYS 用户操作演示 2对普通用户审计 2.1配置审计参数 2.2演示对TEST用 ...
- 火狐的调试利器-----Firebug
什么是Firebug 从事了数年的Web开发工作,越来越觉得现在对WEB开发有了更高的要求.要写出漂亮的HTML代码:要编写精致的CSS样式表展示每个页面模块:要调试javascript给页面增加一些 ...
- # 20145334 《Java程序设计》第9周学习总结
20145334 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC 1.Java语言访问数据库的一种规范,是一套API. 2.JDBC (Java Da ...
- C# 常用类
一.Convert 主要用于数据类型的转换,常用的静态方法有: Convert.ToSingle():把数据转换为单精度浮点数,参数常为字符串 Convert.ToDouble():转为双精度浮点数 ...
- Object对象类
Object对象类是所有类的祖先,他是默认自动继承的 Java为什么要做一个对象类呢?对象类的目的就是归一了类型,他就是把所有的类所有的对象归纳成为 Object类型.因为对象他认为对象应该拥有一些什 ...
- NEC学习 ---- 模块 - 上图下文图文列表
上图下文图文列表的效果如下图: 可以看到三个红色框中的三中"上图下文的图文列表"; 这里的代码其实没什么问题, 对于这种布局, 其实可以参考我上一篇介绍: NEC学习 ---- 模 ...
- MySQL常用问题解决方法
Q: # table 损坏 Table 'table_name' is marked as crashed and should be repaired A: 恢复数据表的索引:myisamchk - ...
- 数据库表结构对比同步mysqldiff
开发服务器的数据库表结构进行了修改,或者修改过多,为了与线上的数据库结构同步,可以使用mysqldiff工具对线上数据库打补丁. mysqldiff Windows下载地址:http://dev.my ...
- 通过 Chrome Workspace 调试本地项目(修改样式时及时保存)
打开 DevTools 开发者工具[F12]中的 Sources 面板,在面板左侧右键选择「Add folder to workspace」,选择添加的文件夹. 添加好后,右键一个文件,选择「Map ...