CSS多列布局继承自块级布局模式,允许简单地定义多列文本。 一行太长的文字读起来很麻烦;当人眼从一行过长的文字末端移动到下一行开始处,就容易弄错到底该读哪一行。因此,为了最优化使用大的显示屏幕,设计者应该限制文字段落的宽度而并排排列,就像报纸一样。
糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。
兼容如下
属性如下
属性(Properties) | 版本(CSS Version) | 简介(Description |
---|---|---|
columns | CSS3 | CSS3 columns 属性,是复合属性,设置或检索对象的列数和每列的宽度 |
column-width | CSS3 | CSS3 column-width 属性,设置或检索对象每列的宽度 |
column-count | CSS3 | CSS3 column-count 属性,设置或检索对象的列数 |
column-gap | CSS3 | CSS3 column-gap 属性,设置或检索对象的列与列之间的间隙 |
column-rule | CSS3 | CSS3 column-rule 属性,是复合属性。设置或检索对象的列与列之间的边框 |
column-rule-width | CSS3 | CSS3 column-rule-width 属性,设置或检索对象的列与列之间的边框厚度 |
column-rule-style | CSS3 | CSS3 column-rule-style 属性,设置或检索对象的列与列之间的边框样式 |
column-rule-color | CSS3 | CSS3 column-rule-color 属性,设置或检索对象的列与列之间的边框颜色 |
column-span | CSS3 | CSS3 column-span 属性,设置或检索对象元素是否横跨所有列 |
column-fill | CSS3 | CSS3 column-fill 属性,设置或检索对象所有列的高度是否统一 |
column-break-before | CSS3 | CSS3 column-break-after 属性,设置或检索对象之后是否断行 |
column-break-after | CSS3 | CSS3 column-width 属性,设置或检索对象每列的宽度 |
column-break-inside | CSS3 | CSS3 column-break-inside 属性,设置或检索对象内部是否断行 |