CSS 列 - CSS

介绍

CSS 列 （CSS Columns） 是一种 CSS3 属性，它允许将文本内容分成多个列，这些列可以进行平衡，可以设置宽度，有各种填充和边框样式，可以控制超出边界的内容的溢出方式等。

语法

div {
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count: 3; /* Firefox */
  column-count: 3;
  
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
  column-gap: 20px;
  
  -webkit-column-rule: 2px outset #666; /* Chrome, Safari, Opera */
  -moz-column-rule: 2px outset #666; /* Firefox */
  column-rule: 2px outset #666;
  
  -webkit-column-fill: auto; /* Chrome, Safari, Opera */
  -moz-column-fill: auto; /* Firefox */
  column-fill: auto;
  
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}

属性值

column-count

column-count 属性用于设置列的数量。

div {
  -webkit-column-count: 4; /* Chrome, Safari, Opera */
  -moz-column-count: 4; /* Firefox */
  column-count: 4;
}

column-gap

column-gap 属性用于设置列与列之间的间隙。

div {
  -webkit-column-gap: 20px; /* Chrome, Safari, Opera */
  -moz-column-gap: 20px; /* Firefox */
  column-gap: 20px;
}

column-rule

column-rule 属性用于设置列与列之间的样式。

div {
  -webkit-column-rule: 2px outset #666; /* Chrome, Safari, Opera */
  -moz-column-rule: 2px outset #666; /* Firefox */
  column-rule: 2px outset #666;
}

column-fill

column-fill 属性用于控制如何分布文本内容。

div {
  -webkit-column-fill: auto; /* Chrome, Safari, Opera */
  -moz-column-fill: auto; /* Firefox */
  column-fill: auto; 
}

column-span

column-span 属性用于指定元素要跨越的所有列。

div {
  -webkit-column-span: all; /* Chrome, Safari, Opera */
  column-span: all;
}

示例

基本列布局

<div>
  <h2>基本列布局</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<style>
div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
}
</style>

多列平衡

<div>
  <h2>多列平衡</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<style>
div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-fill: balance;
  -moz-column-fill: balance;
  column-fill: balance;
}
</style>

多列宽度

<div>
  <h2>多列宽度</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pharetra venenatis ex, eu viverra tortor venenatis ac. Integer semper ex quis velit pulvinar iaculis. Donec eu justo et odio blandit condimentum. Vestibulum quis nibh nec turpis ultrices mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

<style>
div {
  -webkit-column-count: 4;
  -moz-column-count: 4;
  column-count: 4;
  -webkit-column-gap: 1em;
  -moz-column-gap: 1em;
  column-gap: 1em;
  -webkit-column-width: 150px;
  -moz-column-width: 150px;
  column-width: 150px;
}
</style>