Css3多列布局(columns)

为什么会出现多列布局?

当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

浏览器支持状态：

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释：Internet Explorer 9 以及更早的版本不支持多列属性。

用法

不管想让一段文本呈多少列显示，你需要的只是两个属性：column-count 和 column-width（每一列的宽度）。

column-count：<integer> | auto·

<integer>：用整数值来定义列数。不允许负值
auto：根据column-width自定分配宽度

column-width：<integer> | auto(宽度值)

<integer>：用整数值来定义列数。不允许负值
auto：当只有column-width时，auto为其父元素宽度，当使用columns属性时，column-width属性值为auto时，根据column-count划分其每列宽度。

当给列只设置column-count时，浏览器会将文本分为它所设置的列的个数，宽度由浏览器自定义。column-width属性控制列的宽度。如果你没有提供column-count属性值，那么，浏览器就是自主决定将文本分成合适的列数。但是，column-width不可为0和负值；当column-width的值为auto或column-width的值大于元素宽度width一半时，没有分列效果(更准确地，由其他属性来决定)

简写方式

Columns属性

columns：[ column-width ] || [ column-count ]

如：columns:12em;   或columns:4; 等可以代替column-count 和 column-width。

若同时声明时，可以写为   columns:12 8em;  前后顺序无影响

列高度的平衡

CSS3规范里描述的是，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致。

然而，有时候，我们需要设定列的最大高度，这个时候，文本内容会从第一列开始填充，然后第二列，第三列，也许以后的列会填不满，也许会溢出。所以，当对多列布局设定了height或max-height属性值后，列会伸长到指定高度——无论内容有多少，够不够或超不超。

列之间的缝隙间隔宽度

两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em，但如果你使用column-gap属性，就会修改这个缺省的宽度值。

column-gap

设置或检索对象的列与列之间的间隙·

column-gap：<length> | normal

<length>：用长度值来定义列与列之间的间隙。不允许负值
normal：与font-size大小相同。假设该对象的font-size为16px，则normal值为16px，类推。

兼容性

为了保证浏览器最大的兼容性，我们在使用多列布局属性时，最好添加浏览器引擎前缀，最基本的要加上三种：谷歌浏览器的-webkit-，火狐浏览器的-moz-，IE浏览器的-ms-，最后，别忘了不带前缀的写法。

column-rule 复合属性

设置或检索对象的列与列之间的边框。复合属性。

综合：column-rule：[ column-rule-width ] || [column-rule-style ] || [ column-rule-color ]

[ column-rule-width ]：设置或检索对象的列与列之间的边框厚度。

[ column-rule-style ]：设置或检索对象的列与列之间的边框样式。

[ column-rule-color ]：设置或检索对象的列与列之间的边框颜色。

设置或检索对象的列与列之间的边框厚度。

1.column-rule-width：<length> | thin | medium | thick

<length>：用长度值来定义边框的厚度。不允许负值

medium：定义默认厚度的边框。

thin：定义比默认厚度细的边框。

thick：定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

none：无轮廓。column-rule-color与column-rule-width将被忽略

hidden：隐藏边框。

dotted：点状轮廓。

dashed：虚线轮廓。

solid：实线轮廓

double：双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值

groove：3D凹槽轮廓。

ridge：3D凸槽轮廓。

inset：3D凹边轮廓。

outset：3D凸边轮廓。

3.column-rule-color：<color>

跨列

设置或检索对象元素是否横跨所有列。

column-span：none | all

none：不跨列

all：横跨所有列

横跨一列或不跨列的例子：(缩得比较小，主要看样子)

横跨多列的例子：

在代码部分，你需要将要跨列的内容写在需跨列的元素之内，eg

在列布局中，有时由于内容不足，多列中的最后列往往没有足够内容填充，这时要实现所有列都具有相同高度的效果，需要使用列填充属性column-fill设置或检索对象所有列的高度是否统一。规定如何对列进行填充，所有主流浏览器都不支持

column-fill：auto | balance

auto：列高度自适应内容
balance：所有列的高度以其中最高的一列统一

设置或检索对象之前是否断行

.column{column-width:auto;-webkit-column-width:auto;column-width:200px;-moz-column-width:200px;-webkit-column-width:200px;-o-column-width:200px;-ms-column-width:200px;/*按照列的个数的划分*/            column-count:4;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;/*按照列和宽固定划分*/            columns:200px 4;-webkit-columns:200px 4;-moz-columns:200px 4;-ms-columns:200px 4;-o-columns:200px 4;/*列之间的分隔线*/-moz-column-rule:3px outset #ff0000;    /* Firefox */-webkit-column-rule:3px outset #ff0000;    /* Safari and Chrome */-o-column-rule:3px outset #ff0000;-ms-column-rule:3px outset #ff0000;column-rule:3px outset #ff0000;column-gap:100px;-webkit-column-gap:100px;-moz-column-gap:100px;-ms-column-gap:100px;-o-column-gap:100px;-moz-column-fill:balance;}/*跨列*/h1{/*横跨所有列*/column-span:all;-webkit-column-span:all;/*-ms-column-span:all;-moz-column-span:all;*//*横跨一列*//*column-span:1;-webkit-column-span:1;-ms-column-span:1;-moz-column-span:1;*/}

html部分：

<div class="column"><h1>这是人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，</h1>人民网北京2月24日电 (记者 刘阳)国家发展改革委近日发出通知，决定自2月25日零时起将汽、柴油价格每吨分别提高300元和290元，折算到90号汽油和0号柴油（全国平均）每升零售价格分别提高0.22元和0.25元。此次国内成品油价格调整幅度，是按照现行国内成品油价格形成机制，根据国际市场油价变化情况确定的。去年11月16日国内成品油价格调整以来，受市场预期欧美经济复苏前景向好以及中东局势持续动荡等因素影响，国际市场原油价格先抑后扬，2月上旬WTI和布伦特原油期货价格再次回升至每桶95美元和115美元以上。虽然近两日价格有所回落，但国内油价挂钩的国际市场三种原油连续22个工作日移动平均价格上涨幅度已超过4%，达到国内成品油价格调整的边界条件。通知指出，这次成品油调价后，国家将按照已建立的补贴机制，继续对种粮农民、渔业（含远洋渔业）、林业、城市公交、农村道路客运（含岛际和农村水路客运）等给予补贴。同时，为保证市场物价基本稳定，防止连锁涨价，对与居民生活密切相关的铁路客运、城市公交、农村道路客运（含岛际和农村水路客运）价格不作调整。通知要求，中石油、中石化、中海油三大公司要组织好成品油生产和调运，保持合理库存，加强综合协调和应急调度，保障成品油供应。各级价格主管部门要加大市场监督检查力度，依法查处不执行国家价格政策，以及囤积居奇、造谣惑众、合谋涨价、搭车涨价等违法行为，维护正常市场秩序。</div>

下面三个属性可能参考了这份博客详情请点击链接。

auto：既不强迫也不禁止在元素之前断行并产生新列
always：总是在元素之前断行并产生新列（不管上一列有没有填满，都另起一列）
avoid：避免在元素之前断行并产生新列

设置或检索对象之后是否断行

auto：既不强迫也不禁止在元素之后断行并产生新列
always：总是在元素之后断行并产生新列（不管本列有没有填满，后面新建一列）
avoid：避免在元素之后断行并产生新列

设置或检索对象内部是否断行。

column-break-inside：auto| avoid | avoid-page | avoid-column

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

欢迎补充，谢谢！

css3多列布局(columnz)，多列布局相关属性相关推荐

CSS3 多列布局的跨列
默认情况下,多列容器中的内容,会一列一列地自动填充.但有时候,却需要其中的某些内容(如,文章标题)不是多列布局,而是横跨所有列. 要实现类似报纸.杂志上的跨列效果,就可以使用 column-span属 ...
Css学习总结（3）——CSS布局解决方案 - 水平、垂直居中、多列布局、全屏布局
居中布局水平居中子元素于父元素水平居中且其(子元素与父元素)宽度均可变. inline-block + text-align <div class="parent"> ...
多列布局元素和栅格布局基础
目录多列布局(column) column-count column-rule column-fill 瀑布流布局栅格布局 grid-template-columns和grid-template- ...
html把div分成两栏,div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页. 上中下结构,中间又分为两列的全屏自适应布局HTML代码: 上中下 ...
JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
css 列布局,CSS二列三列布局
本篇文章主要介绍本人最近在CSS学习中总结出的常用的二列&三列布局的几种方法二列&三列布局: image.png 二列布局的特征通常是侧栏固定宽度,主栏自适应宽度三列布局的特征通常 ...
两列布局、三列适应布局、两列等高适应布局。
一. 两列布局:左侧定宽.右侧自适应. 四种方法 :flex .position.float和负外边距.外边距 1. 使用flex. <!DOCTYPE html> <html> ...
html 三列布局（两列自适应，一列固定宽度）
不做过多解释:主要是记录一个完整的布局样式,实现页面大致三列其中左右两列是自适应宽度,中间固定宽度效果. 不多少代码奉上: CSS样式代码: /******************** *公共标签样式 ...
matplotlib布局_Matplotlib多列，行跨度布局
matplotlib布局 For Visualization in Python, Matplotlib library has been the workhorse for quite some t ...

css3多列布局(columnz)，多列布局相关属性