就像 Word 中一页分多栏,报纸分栏排版一样。
<style type="text/css"> div { width:200px; column-count:2; column-gap:10px; column-rule:1px dotted red; } </style> <div> 这些文字会被分成两栏,使用 column-count 指定栏数量;column-gap 是栏之间的间隙;column-rule 是分隔线。 </div>
效果:
width 是总宽度,它包含 column-gap。
column-count 表示有多少列。
column-gap 是两栏之间的间隙宽度,并不是某一栏的间隙。
column-rule 并不占据宽度,它如同背景,不影响前景布局。
上图中分隔线左边很多空白,由于左边栏的文字恰好写不下一个字,所以空出来了。
column-span
<style type="text/css"> div { width:200px; column-count:2; column-gap:10px; column-rule:1px dotted red; } </style> <div> <h1>这个标题会被拆分为多栏吗?</h1> 这些文字会被分成两栏,使用 column-count 指定栏数量;column-gap 是栏之间的间隙;column-rule 是分隔线。 </div>
效果:
希望 h1 不被拆分,得指定 column-span:all,该属性只有两个值:1、all。
<style type="text/css"> div { width:200px; column-count:2; column-gap:10px; column-rule:1px dotted red; } div h1 { column-span:all; } </style> <div> <h1>这个标题会被拆分为多栏吗?</h1> 这些文字会被分成两栏,使用 column-count 指定栏数量;column-gap 是栏之间的间隙;column-rule 是分隔线。 </div>
效果:
column-width
这种是限定了总宽度,但是不指定 column-count,指定 column-width,根据 column-width 自动计算有几栏。
注意计算时:要考虑存在着默认的 column-gap 值,比如 300 的 width,150 的 column-width 是拆不成两栏的,因为还有 column-gap 值,拆成两栏宽度不够。