CSS 多列布局扩展了块级布局模式,可以简单地定义多列文本,最优的使用屏幕资源。最直观的一个视觉例子,就是报纸的布局。在多列块中,内容会自动从一列流到下一列。

有两个 CSS 属性 column-countcolumn-width ,意思很直观,前者设置特定列数,后者设置最小的期望列宽。如果只设置了 column-width 而没设置 column-count,那么浏览器会在可用的宽度范围内,自动显示更多的列。由于这两个属性的值没有重叠,再加上多数情况下,我们只用它们中的一个,所以方便起见,可以简写成 columns 。举例:

  • columns:10emcolumn-width:10em
  • columns:3column-count:3
  • columns:3 10emcolumn-count:3; column-width:10em;

column-gap 属性可以设置列间距,比如 column-gap:2em

下面的例子中用到了 columns 和 column-gap,调整屏幕宽度查看动态布局文本信息。

有关多列布局的更多信息,可参考 CSS3 规范 CSS multi-column layout


229 0 0