§ ITPOW >> 文档 >> CSS

有趣的 CSS 3-多列文本 2

作者:vkvi 来源:ITPOW(原创) 日期:2022-8-22

就像 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>

效果:

CSS 3 column

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>

效果:

column-span

希望 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-span

column-width

这种是限定了总宽度,但是不指定 column-count,指定 column-width,根据 column-width 自动计算有几栏。

注意计算时:要考虑存在着默认的 column-gap 值,比如 300 的 width,150 的 column-width 是拆不成两栏的,因为还有 column-gap 值,拆成两栏宽度不够。


相关文章