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

其中:[ column-width ]:设置或检索对象每列的宽度;[ column-count ]:设置或检索对象的列数。

css代码:

body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:;padding:5px 10px;background:#eee;}
h1{margin:10px 0;font-size:16px;}
.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

html代码:

<h1>列数及列宽固定:</h1>
<div class="test">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>
<h1>列宽固定,根据容器宽度液态分布列数:</h1>
<div class="test2">
<p>This module describes multi-column layout in CSS. By using functionality described in this document, style sheets can declare that the content of an element is to be laid out in multiple columns. </p>
<p>On the Web, tables have also been used to describe multi-column layouts. The main benefit of using CSS-based columns is flexibility; content can flow from one column to another, and the number of columns can vary depending on the size of the viewport. Removing presentation table markup from documents allows them to more easily be presented on various output devices including speech synthesizers and small mobile devices.</p>
</div>

结果如图所示:

以下列出column运用的相关属性
1.column-width:<length> | auto 设置或检索对象每列的宽度 
如:-moz-column-width:200px;

2.column-count:<integer> | auto 设置或检索对象的列数
如:-webkit-column-count:3;

3.column-gap:<length> | normal 设置或检索对象的列与列之间的间隙
如:column-gap:normal;column-gap:40px;

4.column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]设置或检索对象的列与列之间的边框。复合属性。相当于border属性
如:column-rule:10px solid #090;

5.column-span:none | all 设置或检索对象元素是否横跨所有列。
如:column-span:all;

6.column-fill:auto | balance 设置或检索对象所有列的高度是否统一。
auto:列高度自适应内容
balance:所有列的高度以其中最高的一列统一
如:column-fill:balance;

7.column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之前是否断行。

auto:既不强迫也不禁止在元素之前断行并产生新列
always:总是在元素之前断行并产生新列
avoid:避免在元素之前断行并产生新列

8.column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column 设置或检索对象之后是否断行。

auto:既不强迫也不禁止在元素之后断行并产生新列
always:总是在元素之后断行并产生新列
avoid:避免在元素之后断行并产生新列

9.column-break-inside:auto | avoid | avoid-page | avoid-column 设置或检索对象内部是否断行。

auto:既不强迫也不禁止在元素内部断行并产生新列
avoid:避免在元素内部断行并产生新列

其实常用的也就前面5条。

css3中的多列布局columns详解的更多相关文章

  1. CSS3之多列布局columns详解

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

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

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

  3. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  4. CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...

  5. CSS3 多列布局——Columns

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

  6. 多列布局——Columns

    为了能在Web页面中方便实现类似报纸.杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Column Layout Module).它主要应用在文本的多列布局方面 ...

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

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

  8. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  9. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

随机推荐

  1. Java synchronized关键字用法(清晰易懂)

    本篇随笔主要介绍 java 中 synchronized 关键字常用法,主要有以下四个方面: 1.实例方法同步 2.静态方法同步 3.实例方法中同步块 4.静态方法中同步块 我觉得在学习synchro ...

  2. ASP.NET WebAPI 09 Controller的激活

    在Controller之前我们先回顾一下HttpMessageHandler通道. 在这个图中我留一个HttpContollerDispatcher没有说明.因为这个类也是继承自HttpMessage ...

  3. Follow me to learn what is repository pattern

    Introduction Creating a generic repository pattern in an mvc application with entity framework is th ...

  4. java File.mkdirs和mkdir区别

    File f = new File("e://xxx//yyy"); System.out.println(f.mkdirs());//生成所有目录,一般来说,这个方法稳健性更好, ...

  5. [Xamarin.Android] Support Library Tips

    [Xamarin.Android] Support Library Tips Support Library支持内容 Xamarin Support Library每个版本支持.那些组件,可以参考这份 ...

  6. 【Android】开源项目UI控件分类汇总之Dialog

    接前文ProgressBar:Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的An ...

  7. 复杂表格的树形结构的添加删除行div实现

    公司倒闭,换了工作,无奈选择了做外包这个差事,大公司进不去,小公司工资太低,可能也只能如此了.但无奈之举,亦不可浪费时间,多多磨练自己吧! 众所周知,做外包项目,其实就是做一些大公司的内部系统,多以管 ...

  8. 简单理解JavaScript闭包

    很多关于JS的书籍例如<JavaScript权威指南>或者<高程>都把闭包解释的晦涩难懂,萌新们是怎么也看不懂啊!不过别怕,今天我就用很简单的方式给大家讲解下到底什么是闭包.这 ...

  9. android 读中文文本文件

    AndroidManifest.xml中 加入: <!-- 在SDCard中创建与删除文件权限 --> <uses-permission android:name="and ...

  10. github 基础教程推荐

    github现在很火的样子 我在一篇博客上看到说“如果你不知道什么是github,那你就不能说你是个coder,如果你现在看到这篇博客,那么你已经是个coder了”. 我对github一直很好奇,可是 ...