为了能在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. AppStore上传条例

    1. 条款和条件1.1 为App Store开发程序,开发者必须遵守 Program License Agreement (PLA).人机交互指南(HIG)以及开发者和苹果签订的任何协议和合同.以下规 ...

  2. Cortex-M0(NXP LPC11C14)启动代码分析

    作者:刘老师,华清远见嵌入式学院讲师. 启动代码的一般作用 1.堆和栈的初始化: 2.向量表定义: 3.地址重映射及中断向量表的转移: 4.初始化有特殊要求的断口: 5.处理器模式: 6.进入C应用程 ...

  3. ELK_日志分析系统Logstash+ElasticSearch+Kibana4

    elk 日志分析系统 Logstash+ElasticSearch+Kibana4 logstash 管理日志和事件的工具 ElasticSearch 搜索 Kibana4 功能强大的数据显示客户端 ...

  4. ng-repeat 指令

    <!--索引属性:$index,$first,$middle,$last--> <!--样式属性:ng-class-even,ng-class-odd--> <tr ng ...

  5. jQ处理页面中尺寸过大的图片

    这是一个非常实用的功能,在网页里难免会出现一些尺寸过大的图片,会将页面撑开或者图片被部分隐藏,我们通常会用css的max-width来加以 控制,但ie6却不吃这套.我在做一个站时,就遇到这种困惑,因 ...

  6. return和finally的执行顺序

    创建一个类,新建一个方法: public class Demo { public int get() { int x=1; try { x++; return x; }finally{ ++x; } ...

  7. winform连接ACCESS数据库

    1.先建立一个名叫text.mdb的access数据库 2.他它复制到access中文件下. 3.在App_Code文件夹下建好封装语句,查询方法,连接语句,其中studentDA中的代码为: pri ...

  8. linux笔记八---------文件查找

    1.find文件查找指令 > find  目录  参数 参数值,参数 参数值.....    > find  /  -name  passwd   //从系统根目录开始递归查找name=p ...

  9. UIDynamic(物理仿真)

    简介 什么是UIDynamic UIDynamic是从iOS 7开始引入的一种新技术,隶属于UIKit框架 可以认为是一种物理引擎,能模拟和仿真现实生活中的物理现象 如: 重力.弹性碰撞等现象 物理引 ...

  10. java读取属性配置文件工具类

    import java.io.IOException; import java.io.InputStream; import java.util.Properties; /** * * 类: ProU ...