files/zh-cn/web/css/column-count/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

---
title: column-count
slug: Web/CSS/column-count
tags:
  - CSS3 Multiple column layout
  - CSS3多列布局
translation_of: Web/CSS/column-count
---
<div>{{CSSRef}}</div>

<div> </div>

<p><strong>column-count </strong>CSS属性，描述元素的列数。</p>

<pre><code>column-count: 3;
column-count: auto;

column-count: inherit;
column-count: initial;
column-count: unset;</code></pre>

<h2 id="Syntax" name="Syntax">语法</h2>

<p>{{cssinfo}}</p>

<h3 id="取值">取值</h3>

<dl>
 <dt><code>auto</code></dt>
 <dd>用来表示列的数量由其他CSS属性指定, 例如 {{cssxref("column-width")}}.</dd>
 <dt><code>&lt;number&gt;</code></dt>
 <dd>是个严格的正数 {{cssxref("&lt;integer&gt;")}} ，用来描述元素内容被划分的理想列数. 假如 {{cssxref("column-width")}}也被设置为非零值, 此参数仅表示所允许的最大列数. </dd>
</dl>

<h2 id="Examples" name="Examples">例子</h2>

<pre class="brush: css">.content-box {
  border: 10px solid #000000;
  column-count:3;
}
</pre>

<h2 id="Specifications" name="Specifications">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}</td>
   <td>{{Spec2('CSS3 Multicol')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<p> </p>

<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}{{property_prefix('-webkit')}}</td>
   <td>{{compatGeckoDesktop("1.8")}}{{property_prefix('-moz')}}</td>
   <td>10</td>
   <td>11.1</td>
   <td>3.0 (522){{property_prefix('-webkit')}}</td>
  </tr>
  <tr>
   <td>on <code>display:</code> <code>table-caption</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{compatGeckoDesktop("37")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{compatGeckoMobile("1.8")}}{{property_prefix('-moz')}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
  <tr>
   <td>on <code>display:</code> <code>table-caption</code></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{compatGeckoMobile("37")}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>

<p> </p>

<h4 id="了解更多">了解更多</h4>

<p><a href="https://www.w3.org/TR/css3-multicol/">https://www.w3.org/TR/css3-multicol/</a></p>

<p><a href="https://caniuse.com/#search=column">https://caniuse.com/#search=column</a></p>

<p> </p>
</div>