多列布局——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 ...
随机推荐
- GO语言练习:为类型添加方法
1.代码 2.运行 1.代码 package main import "fmt" type Integer int //给in类型添加 Less 方法,int原来的方法被Integ ...
- MongoDB用户权限基本操作
查看当前数据库的全部用户 > show users{ "_id" : ObjectId("4dedeeae26e7516d69948e33" ...
- 去掉tppabs冗余代码,怎样批量去掉tppabs代码
去掉tppabs冗余代码,怎样批量去掉tppabs代码 刚用teleport pro拉了一个整站到本地 所有的超链都被强行加了一句tppabs=" 就玩了一把dw的替换功能 查找范围:整 ...
- [LintCode] Swap Nodes in Pairs 成对交换节点
Given a linked list, swap every two adjacent nodes and return its head. Example Given 1->2-> ...
- Odoo Website 替换 Summernote 为第三方富文本编辑器
随着用odoo的人越来越多,奇葩的需求也是越来越多.... 这不,有同学就想替换掉website forum里边的summernote控件,花了点时间研究了一下,先说结论:替换是可行的. 先上替换之后 ...
- php读取html文件(或php文件)的方法
一.使用fopen()函数 此函数主要传入的是头两个参数(第一个是文件地址,第二个是打开方式),可以读取任何一个文本文件,然后用while将fopen函数读取到的每一行数据循环输出. 如: ...
- remove 清除binlog
#!/bin/bash DATACFG=/etc/my.cnf DATADIR=`awk /^datadir/ $DATACFG|awk -F"=" '{print $2}'` D ...
- php Use of undefined constant的问题解决方式
在每个文件头上加 error_reporting(0); 或者 搜索php.ini: error_reporting = E_ALL 改为: error_reporting = E_ALL & ...
- Mysql和Oracle数据库concat()函数
一.函数的使用参数不同 Mysql支持多个字符串拼接: CONCAT(str1,str2,-) Oralce只支持两个字符串的拼接,若想拼接多个字符串可以嵌套使用concat CONCAT(str1, ...
- BizTalk开发系列(二十五) SQL Adapter
SQL Server 是.NET开发的首选数据库.当然开发BizTalk应用程序很多也离不了SQL Server.针对SQL Server的数据操作BizTalk 提供了SQL Adapter作为与数 ...