用多列布局 | CSS Columns: Using multi-column layouts (Multi-column Layout) - CSS 中文开发手册 - Break易站

用多列布局 | CSS Columns: Using multi-column layouts (Multi-column Layout) - CSS 中文开发手册

CSS多列布局的延伸块布局模式以允许文本的多个列的简单的定义。如果线条太长，人们就无法阅读文本; 如果眼睛从一条线的末端移动到另一条线的起始端需要很长的时间，那么它们就失去了他们所在的线路。因此，为了最大限度地利用大屏幕，作者应该像报纸一样将宽度有限的文本排列在一起。

不幸的是，如果不强制在固定位置进行分栏，或者严格限制文本中允许使用的标记，或者使用英雄式脚本 heroic scripting，则不可能使用CSS和HTML。这个限制是通过添加新的CSS属性来扩展传统的块布局模式来解决的。

使用列

列数和宽度

两个CSS属性控制是否显示多少列：column-count和column-width。

该column-count属性将列数设置为特定的数字。例如，

例1

HTML

  

    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.
  
  

    Ut enim ad minim veniam, quis nostrud exercitation ullamco 
    laboris nisi ut aliquip ex ea commodo consequat.
  
  

    Duis aute irure dolor in reprehenderit in voluptate velit 
    esse cillum dolore eu fugiat nulla pariatur.
  
  

    Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.
  

CSS

#col {
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
}

结果

将显示两栏中的内容（如果您使用的是多列兼容的浏览器）：

该column-width属性设置最小的期望列宽。如果column-count还没有设置，那么浏览器会自动创建尽可能多的列，以适应可用的宽度。

例2

HTML

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia
  deserunt mollit anim id est laborum

CSS

#wid {
  -moz-column-width: 100px;
  -webkit-column-width: 100px;
  column-width: 100px;
}

结果

具体细节见CSS 3规范...

在多列块中，内容根据需要自动从一列移动到下一列。与编辑和打印一样，所有HTML，CSS和DOM功能都在列中受支持。

columns速记

大多数情况下，网页设计师将使用两个CSS属性之一：column-count或column-width。由于这些属性的值不重叠，因此使用简写通常很方便columns。例如

CSS声明column-width:12em可以替换为：

例3

HTML

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum

CSS

#col_short {
  -moz-column-width: 12em;
  -moz-columns: 12em;
  -webkit-columns: 12em;
  columns: 12em;
}

CSS声明column-count:4可改为：

例4

HTML

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum

CSS

#columns_4 {
  -moz-column-count: 4;
  -moz-columns: 4;
  -webkit-columns: 4;
  columns: 4;
}

结果

两个CSS声明column-width:8em和column-count:12可改为：

例5

HTML

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat. 
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum

CSS

#columns_12 {
  -moz-columns: 12 8em;
  -webkit-columns: 12 8em;
  columns: 12 8em;
}

结果

高度平衡

CSS3列规范要求列高度必须平衡：即浏览器自动设置最大列高度，以便每列中内容的高度大致相等。Firefox做到这一点。

但是，在某些情况下，明确设置列的最大高度也很有用，然后从第一列开始布置内容，并根据需要创建尽可能多的列，可能会溢出到右侧。因此，如果高度受到限制，则通过在多列块上设置CSS height或max-height属性，每列允许增长到该高度，并且在添加新列之前不再进一步。这种模式对于布局也更有效率。

列间隙

列之间有差距。建议的默认值是1em。可以通过将column-gap属性应用于多列块来更改此大小：

例6

HTML

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
  sed do eiusmod tempor incididunt ut labore et dolore magna 
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
  ullamco laboris nisi ut aliquip ex ea commodo consequat.
  Duis aute irure dolor in reprehenderit in voluptate velit 
  esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
  occaecat cupidatat non proident, sunt in culpa qui officia 
  deserunt mollit anim id est laborum

CSS

#column_gap {
  -webkit-column-count: 5;
  -moz-column-count: 5;
  column-count: 5;
  -moz-column-gap: 2em;
  -webkit-column-gap: 2em;
  column-gap: 2em;
}

结果

优美退化

列属性将被不支持列的浏览器忽略。因此，在这些浏览器中创建一个显示在单个列中的布局并且在支持浏览器时使用多个列相对比较容易。

请注意，最新版本的Firefox和Chrome支持这些属性的前缀，为了确保向后兼容旧的Firefox / Chrome版本，每个属性应该被写入三次：一次使用-moz前缀，一次使用-webkit前缀，一次使用前缀。

结语

CSS3列是一个布局原语，可以帮助Web开发人员充分利用屏幕空间。富有想象力的开发人员可能会发现它们的许多用途，特别是自动高度平衡功能。