使用CSS的多列布局

  • 版本网址缩略名: Web/Guide/CSS/Using_multi-column_layouts
  • 版本标题: 使用CSS的多列布局
  • 版本 id: 433941
  • 创建于:
  • 创建者: Nightingale
  • 是否是当前版本?
  • 评论

修订内容

{{CSSRef()}}

CSS多列布局继承自块级布局模式,允许简单地定义多列文本。 一行太长的文字读起来很麻烦;当人眼从一行过长的文字末端移动到下一行开始处,就容易弄错到底该读哪一行。因此,为了最优化使用大的显示屏幕,设计者应该限制文字段落的宽度而并排排列,就像报纸一样。

糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。

使用多列布局

列计数器和宽度

有两个CSS属性控制是否实现多列布局和显示多少列: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。

属性 column-count 设置特定数量的列数。例如,

<div style="column-count:2;">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</div>

会以两列的方式显示内容:(如果你正使用支持多列布局的浏览器的话):

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

属性 column-width 设置期望的最小列宽。如果 column-count 没有设置,那么浏览器就会以合适的宽度尽量显示更多的列。

<div style="column-width:20em;">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</div>

变成:

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

详细细节在 CSS3规范 中。

在多列块中,内容会自动从一列换到另一列中。所有 HTML, CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。

columns 属性简写

Most of the time, the Web designer use one of the two CSS properties: {{ cssxref("column-count") }} or {{ cssxref("column-width") }}. As values for these properties does not overlap, it is often convenient to use the shorthand {{ cssxref("columns") }}. E.g.

The CSS declaration column-width:12em can be replaced by:

<div style="columns:12em">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</div>

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

The CSS declaration column-count:4 can be replaced by:

<div style="columns:4">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</div>

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

The two CSS declarations column-width:8em and column-count:12 can be replaced by:

<div style="columns:12 8em">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</div>

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

高度平衡

The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.

However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS {{ cssxref("height") }} or {{ cssxref("max-height") }} properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.

列间隙

There is a gap between columns. The recommended default is 1em. This size can be changed by applying the {{ Cssxref("column-gap") }} property to the multi-column block:

<div style="column-width:20em; column-gap:2em;">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</div>

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

优雅降级

The column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers.

Note that not all browsers supports these properties unprefixed. To make use of this feature in most today's browsers, each property must be written thrice: once with the {{ property_prefix("-moz") }} prefix, once with the {{ property_prefix("-webkit") }} prefix and once without prefix.

讨论

CSS3 columns are a layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.

其它

 
 

修订版来源

<p>{{CSSRef()}}</p>
<p><span class="seoSummary">CSS多列布局继承自块级布局模式,允许简单地定义多列文本。</span> 一行太长的文字读起来很麻烦;当人眼从一行过长的文字末端移动到下一行开始处,就容易弄错到底该读哪一行。因此,为了最优化使用大的显示屏幕,设计者应该限制文字段落的宽度而并排排列,就像报纸一样。</p>
<p>糟糕的是如果不使用CSS和HTML在特定的位置强制换行,或者严格限制文本中允许的标记,或者夸张地使用脚本的话,这是不可能实现的。该限制通过从传统的块级布局模块中延伸出来的新的CSS属性得以解决。</p>
<h2 id=".E4.BD.BF.E7.94.A8.E5.A4.9A.E5.88.97">使用多列布局</h2>
<h3 id=".E5.88.97.E8.AE.A1.E6.95.B0.E5.99.A8.E5.92.8C.E5.AE.BD.E5.BA.A6">列计数器和宽度</h3>
<p>有两个CSS属性控制是否实现多列布局和显示多少列: {{ Cssxref("column-count") }} and {{ Cssxref("column-width") }}。</p>
<p>属性 <code>column-count</code> 设置特定数量的列数。例如,</p>
<pre class="brush: html">
&lt;div style="column-count:2;"&gt;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&lt;/div&gt;
</pre>
<p>会以两列的方式显示内容:(如果你正使用支持多列布局的浏览器的话):</p>
<p style="-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;">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</p>
<p>属性 <code>column-width</code> 设置期望的最小列宽。如果 <code>column-count</code> 没有设置,那么浏览器就会以合适的宽度尽量显示更多的列。</p>
<pre class="brush: html">
&lt;div style="column-width:20em;"&gt;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&lt;/div&gt;
</pre>
<p>变成:</p>
<p style="-moz-column-width: 20em;-webkit-column-width: 20em;column-width: 20em;">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</p>
<p>详细细节在 <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3规范</a> 中。</p>
<p>在多列块中,内容会自动从一列换到另一列中。所有 HTML, CSS 和 DOM 功能在列之间都得到支持, 比如编辑和打印。</p>
<h3 id="columns_.E5.B1.9E.E6.80.A7.E7.AE.80.E5.86.99"><code>columns</code> 属性简写</h3>
<p>Most of the time, the Web designer use one of the two CSS properties: {{ cssxref("column-count") }} or {{ cssxref("column-width") }}. As values for these properties does not overlap, it is often convenient to use the shorthand {{ cssxref("columns") }}. E.g.</p>
<p>The CSS declaration <code>column-width:12em</code> can be replaced by:</p>
<pre class="brush: html">
&lt;div style="columns:12em"&gt;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&lt;/div&gt;
</pre>
<p style="-moz-column-width:12em;-moz-columns:12em; -webkit-columns:12em; columns: 12em;">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</p>
<p>The CSS declaration <code>column-count:4</code> can be replaced by:</p>
<pre class="brush: html">
&lt;div style="columns:4"&gt;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&lt;/div&gt;
</pre>
<p style="-moz-column-count: 4;-moz-columns: 4; -webkit-columns:4;columns: 4;">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</p>
<p>The two CSS declarations <code>column-width:8em</code> and <code>column-count:12</code> can be replaced by:</p>
<pre class="brush: html">
&lt;div style="columns:12 8em"&gt;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&lt;/div&gt;
</pre>
<p style="-moz-columns:12 8em; -webkit-columns:12 8em; columns: 12 8em;">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</p>
<h3 id=".E9.AB.98.E5.BA.A6.E5.B9.B3.E8.A1.A1">高度平衡</h3>
<p>The CSS3 Column specification requires that the column heights must be balanced: that is, the browser automatically sets the maximum column height so that the heights of the content in each column are approximately equal. Firefox does this.</p>
<p>However, in some situations it is also useful to set the maximum height of the columns explicitly, and then lay out content starting at the first column and creating as many columns as necessary, possibly overflowing to the right. Therefore, if the height is constrained, by setting the CSS {{ cssxref("height") }} or {{ cssxref("max-height") }} properties on a multi-column block, each column is allowed to grow to that height and no further before adding new column. This mode is also much more efficient for layout.</p>
<h3 id=".E5.88.97.E9.97.B4.E9.9A.99">列间隙</h3>
<p>There is a gap between columns. The recommended default is <code>1em</code>. This size can be changed by applying the {{ Cssxref("column-gap") }} property to the multi-column block:</p>
<pre class="brush: html">
&lt;div style="column-width:20em; column-gap:2em;"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,&nbsp;
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,&nbsp;
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.&nbsp;
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat&nbsp;
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa&nbsp;
qui officia deserunt mollit anim id est laborum&lt;/div&gt;
</pre>
<p style="-moz-column-width: 20em;-webkit-column-width: 20em;column-width: 20em; -moz-column-gap: 2em;-webkit-column-gap: 2em;column-gap: 2em;">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</p>
<h2 id=".E4.BC.98.E9.9B.85.E9.99.8D.E7.BA.A7">优雅降级</h2>
<p>The column properties will just be ignored by non-columns-supporting browsers. Therefore it's relatively easy to create a layout that will display in a single column in those browsers and use multiple columns in supporting browsers.</p>
<p>Note that not all browsers supports these properties unprefixed. To make use of this feature in most today's browsers, each property must be written thrice: once with the {{ property_prefix("-moz") }} prefix, once with the {{ property_prefix("-webkit") }} prefix and once without prefix.</p>
<h2 id=".E8.AE.A8.E8.AE.BA">讨论</h2>
<p>CSS3 columns are a layout primitive that will help Web developers make the best use of screen real estate. Imaginative developers may find many uses for them, especially with the automatic height balancing feature.</p>
<h2 id=".E5.85.B6.E5.AE.83">其它</h2>
<ul>
  <li>{{ CSS_Reference:Columns() }}</li>
  <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/03/gecko_18_for_we.html" rel="freelink">http://weblogs.mozillazine.org/roc/a...18_for_we.html</a></li>
</ul>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
<div id="xunlei_com_thunder_helper_plugin_d462f475-c18e-46be-bd10-327458d045bd">
  &nbsp;</div>
恢复到这个版本