利用column多列属性调整页面文字列布局

2020-04-30 14:48:31易采站长站整理

多列布局columns语法简写

大多时候,WEB程序员只需要同时使用这两个属中的一个:column-count 或 column-width。或者两个同时使用,幸运的是,这两个属性的属性值是不同单位,不会搞混,所以就有了简写方式,columns,例如:

我们之前写的 column-width:12em 可以用下面的写法替换:

<div style="columns:12em">CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。</div>。
2015819174027205.jpg (501×121)

而之前写的 column-count:4 可以用以下语法简写替换:
<div style="columns:4">CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。</div>
2015819174051372.jpg (498×123)

而同时声明了 column-width:8em 和 column-count:12 的情况可以用以下简写替换:
<div style="columns:12 8em">CSS里一直有一个让我们头疼的问题,就是创建布局很麻烦。当然,有很多方式,有很多技术都可以创建各种布局,但我们总觉得CSS里应该提供一些新属性,让我们能更好的管理布局。幸运的是,CSS3里提供了一批新的创建列式布局的column属性,有了这些属性,我们不需要再使用float,clear,margin等属性进行调控,避免了很多麻烦。</div>
2015819174113004.jpg (499×123)

列高度的平衡

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

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

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