css3中的多列布局columns详解

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

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

css代码：

body{font:14px/1.5 georgia,serif,sans-serif;}
p{margin:0;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;

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

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

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

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

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

来源:http://www.cnblogs.com/moqiutao/p/4817321.html

css3中的多列布局columns详解相关推荐

关于css3中的2d样式skew倾斜详解
简介: 在css3中,transform有个属性skew,能使元素产生倾斜效果,不少小伙伴接触到时都很费解,为什么倾斜效果和自己想的不一样,当然网上也有不少死记硬背规律口诀的方法,但我个人觉得都不是很 ...
CSS3中（border-radius）边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
CSS3之多列布局columns学习
CSS3之多列布局columns学习基本属性如下: 1. columns: column-width column-count 2. column-width:length | auto 3. co ...
html中如何多列布局,CSS3 多列布局
CSS3 多列布局使用CSS3,您可以将元素的文本内容分成多列. 创建多列布局 CSS3引入了多列布局模块,用于以简单有效的方式创建多个列布局.现在,您无需使用浮动框即可创建像在杂志和报纸上看到的布 ...
CSS3多列布局 columns 弹性布局 flex
多列布局columns 多列布局可以控制页面内容的排版方式,可以将文本内容设计成像报纸一样的多列布局. 属性示例含义 column-count column-count: 3; 将元素内部分割成3 ...
element布局容器大小_element中el-container容器与div布局区分详解
用于布局的容器组件,方便快速搭建页面的基本结构: el-container:外层容器.当子元素中包含或时,全部子元素会垂直上下排列,否则会水平左右排列. el-header:顶栏容器. el-as ...
Python之pandas：pandas中to_csv()、read_csv()函数的index、index_col(不将索引列写入)参数详解之详细攻略
Python之pandas:pandas中to_csv().read_csv()函数的index.index_col(不将索引列写入)参数详解之详细攻略目录 pandas中to_csv().read ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
java excel中重复数据事务处理_Java导出excel时合并同一列中相同内容的行思路详解...
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...

css3中的多列布局columns详解

css3中的多列布局columns详解相关推荐

最新文章

热门文章