为了能在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的更多相关文章

  1. CSS3之多列布局columns详解

    CSS3之多列布局columns详解 CSS3提供了个新属性columns用于多列布局.基本属性如下: 1. columns: <'column-width'> || <'colum ...

  2. CSS3 多列布局——Columns

    CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...

  3. css3中的多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  4. CSS3布局之多列布局columns详解

    columns语法:columns:[ column-width ] || [ column-count ]设置或检索对象的列数和每列的宽度 其中:[ column-width ]:设置或检索对象每列 ...

  5. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  6. CSS多列布局

    × 目录 [1]列宽 [2]列数 [3]列间距[4]列rule[5]跨列[6]列填充[7]多列 前面的话 CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记.简单来 ...

  7. 第 28 章 CSS3 多列布局

    学习要点: 1.早期多列问题 2.属性及版本 3.属性解释 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局. 一.早期多列问题 我们 ...

  8. 多列布局 css3 column属性

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  9. css3 多列布局记

    css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...

随机推荐

  1. 彩色照片转换为黑白照片(Color image converted to black and white picture)

    This blog will be talking about the color image converted to black and white picture. The project st ...

  2. Java_java动态编译整个项目,解决jar包找不到问题

    java动态编译整个项目,解决jar包找不到问题原文:http://itzyx.com/index.php/javac/ 动态将java文件编译为class文件解决方案:将temp\sdl\src目录 ...

  3. C#读取数据库字节流生成图片

    前台用DataList绑定 <asp:DataList ID="DataList1" runat="server"> <ItemTemplat ...

  4. Optimizely:在线网站A/B测试平台

    Optimizely:在线网站A/B测试平台是一家提供 A/B 测试服务的公司.A/B 测试能够对比不同版本的设计,选取更吸引用户眼球的那一款,从而带来更为优化的个人体验.让网站所有者易于对不同版本的 ...

  5. WinForm timer控件

    timer 控件:按用户定义的时间间隔引发的事件 属性: Enabled   是否启用:  Interval    事件发生的事件间隔,单位是毫秒 事件只有一个:Tick    事件经过指定的时间间隔 ...

  6. firefox如何禁用JavaScript

    1.在Firefox地址栏里输入“about:config”.2.在搜索栏输入“javascript.enabled”查找到首选项.3.点击鼠标右键选择“切换”,把“javascript.enable ...

  7. do some projects in macine learning using python

    i want to do some projects in macine learning using python help me in this context I don't know if y ...

  8. Week1 学长的经验教训

    我手头拿到的是上一届学长的软件工程大作业,作业的名称是——汽车4S店信息管理系统. 这个大作业我认为还是非常典型的传统模式的大作业,由手机端(客户端)和服务端组成,非常的传统.             ...

  9. Another app is currently holding the yum lock; waiting for it to exit...

    刚安装完虚拟机,用xshell连接上linux后,安装程序时一直出现这个信息Another app is currently holding the yum lock; waiting for it ...

  10. 理解insert all/insert first的使用

    在常用的SQL写法中我们会经常遇到把一个表的数据插入另外一张表的情况,这是一个insert into 表名 select .... from 表名   就可以解决了.但是如果是把一张表的数据同时插入两 ...