多列布局——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 ...
随机推荐
- 使用audio标签播放音频文件
HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...
- iOS开发-二维码扫描和应用跳转
iOS开发-二维码扫描和应用跳转 序言 前面我们已经调到过怎么制作二维码,在我们能够生成二维码之后,如何对二维码进行扫描呢? 在iOS7之前,大部分应用中使用的二维码扫描是第三方的扫描框架,例如Z ...
- android夜间模式实现
一.概述 android夜间模式实现分为两大类 重启activity的实现 不重启activity的实现 二.正文 1.重启activity实现夜间模式[在界面文件中的实现部分] 1.1在attrs. ...
- android-BaseAdapter自定义控件深刻理解
一.自定义控件的实现 自定义控件需要继承BaseAdapter抽象类,该类实现了ListAdapter, SpinnerAdapter两个接口,这两个接口继承了Adapter接口类,没错.是继承Ada ...
- Centos Odoo Service Config
#!/bin/sh ### BEGIN INIT INFO # Provides: openerp-server # Required-Start: $remote_fs $syslog # Requ ...
- Oracle中建表和指定表空间
--建一个表create table HH2( tid number primary key ,--主键设定 tname varchar2(20) ); --删除表drop table HH; --表 ...
- HDU3874 /HDU3333 树状数组 区间求不重复数和
Necklace Time Limit: 15000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- hdu Sudoku Killer
简单的dfs,主要就是每个?处填的值是否满足条件的判断.这道题感觉考察的是输出格式的控制. #include"iostream" #include"stdio.h&quo ...
- .net 的 Url 中文加密
当 Get 的请求参数可能出现中文的时候,那么就需要对其中文进行加密处理: 引用程序集:System.Web 加密方法: HttpUtility.UrlEncode(); 解密方法:HttpUtili ...
- C# 常用结构
几种常用类的基本结构如下: public Size( double width, double height ) public Point( double x, double y) public Ve ...