您的位置：首页 > Web前端 > CSS

CSS3：几个例子带你读懂columns多列

2017-12-21 18:10 405 查看

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道，当一行文字太长时，读者读起来就比较费劲，有可能读错行或读串行；人们的视点从文本的一端移到另一端、然后换到下一行的行首，如果眼球移动浮动过大，他们的注意力就会减退，容易读不下去。所以，为了最大效率的使用大屏幕显示器，页面设计中需要限制文本的宽度，让文本按多列呈现，就像报纸上的新闻排版一样。

CSS3 columns 属性

columns columns['kɒləm] 纵列

参数	用法	描述
column-width	column-width:12em;	用来定义多列中每列的宽度
column-count	column-count:3;	用来定义多列中的列数
column-gap	column-gap:2em;	两列之间会有缝隙间隔。缺省情况下这个间隔宽度是1em
column-rule	column-rule:2px dotted green；	用来定义列与列之间的边框宽度、边框样式和边框颜色。类似于border属性。但column-rule不占用任何空间位置，在列与列之间改变其宽度不会改变任何列的位置。
通常column-width和column-count一起用，其他单用。Eg: columns:200px 2;

column-rule细则
参数	描述
column-rule-width	类似于border-width，用来定义列边框的宽度，默认值为“medium”， column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。
column-rule-style	类似于border-style，用来定义列边框样式，默认值为“none”。 column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
column-rule-color	类似于border-color，用来定义列边框颜色，默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)

列高度的平衡
在CSS3规范里，各列的高度是均衡的，浏览器会自动调整每列里填充多少文本、均分文本，来使各列的高度保持均衡一致。
有时候，我们需要设定列的最大高度max-height，这时文本内容会从第一列开始填充，然后第二列，第三列；也许以后的列会填不满或溢出。所以，当对多列布局设定了height或max-height属性值后，列会伸长到指定高度——无论内容有多少。

举例

例1、div没有固定宽度，则column-count为几就是几列；

<html>
<style>
.class{
-moz-columns:200px 3;                 -webkit-columns:200px 3;
columns:200px 3;                      column-rule:2px dotted orange;
-moz-column-rule:2px dotted orange;   -webkit-column-rule:2px dotted orange;
}
</style>
<body><div class="class">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. 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.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. 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.</div></body>
</html>

结果如下图：

例2、div宽度为600px,column-count为3,但只有两列。（因为每列200px,加上两个column-rule-width超过了600px，所以只有两列）

<html>
<style>
.class{
width:600px;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
column-rule:2px dotted orange;
-moz-column-rule:2px dotted orange;
-webkit-column-rule:2px dotted orange;
}
</style>
<body>
<div class="class">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. 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.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. 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.</div>
</body>
</html>

结果如下图：

例3、固定宽度为640px,column-count为3,有三列。

<html>
<style>
.class{
width:640px;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
column-rule:2px dotted orange;
-moz-column-rule:2px dotted orange;
-webkit-column-rule:2px dotted orange;
}
</style>
<body>
<div class="class">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. 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.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. 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.</div>
</body>
</html>

结果如下图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 多列 CSS3 columns

相关文章推荐

新的分享

章节导航