initial commit

1 files changed, 96 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/columns/index.html b/files/zh-cn/web/css/columns/index.html
new file mode 100644
index 0000000000..ad3e0f8c41
--- /dev/null
+++ b/files/zh-cn/web/css/columns/index.html
@@ -0,0 +1,96 @@
+---
+title: columns
+slug: Web/CSS/columns
+translation_of: Web/CSS/columns
+---
+<div>{{CSSRef}}</div>
+
+<p>CSS属性 <strong><code>columns</code></strong> 用来设置元素的列宽和列数。</p>
+
+<div>{{EmbedInteractiveExample("pages/css/columns.html")}}</div>
+
+
+
+<p>它是一个<a href="/en-US/docs/Web/CSS/Shorthand_properties">简写属性</a>，可在单个方便的声明中设置 {{cssxref('column-width')}} 和 {{cssxref("column-count")}} 属性。与所有简写属性一样，任何省略的子值都将设置为其<a href="/en-US/docs/Web/CSS/initial_value">初始值</a>。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="brush:css no-line-numbers">/* Column width */
+columns: 18em;
+
+/* Column count */
+columns: auto;
+columns: 2;
+
+/* Both column width and count */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* Global values */
+columns: inherit;
+columns: initial;
+columns: unset;</pre>
+
+<p><code>columns</code> 属性可以按任何顺序指定为下面列出的一个或两个值。</p>
+
+<h3 id="取值">取值</h3>
+
+<dl>
+ <dt><code>&lt;'column-width'&gt;</code></dt>
+ <dd><span class="tlid-translation translation" lang="zh-CN"><span title="">理想的列宽，定义为</span></span> {{cssxref("&lt;length&gt;")}} <span class="tlid-translation translation" lang="zh-CN"><span title="">或</span></span> <code>auto</code> <span class="tlid-translation translation" lang="zh-CN"><span title="">关键字。实际宽度可以更宽或更窄以适合可用空间。</span></span>See {{cssxref("column-width")}}<span class="tlid-translation translation" lang="zh-CN"><span title="">。</span></span></dd>
+ <dt><code>&lt;'column-count'&gt;</code></dt>
+ <dd><span class="tlid-translation translation" lang="zh-CN"><span title="">元素内容应分成的理想列数，定义为 </span></span>{{cssxref("&lt;integer&gt;")}} <span class="tlid-translation translation" lang="zh-CN"><span title="">或</span></span> <code>auto</code><span class="tlid-translation translation" lang="zh-CN"><span title=""> 关键字。如果此值和列的宽度都不是</span></span> <code>auto</code> <span class="tlid-translation translation" lang="zh-CN"><span title="">，则它仅指示允许的最大列数。请参阅 </span></span>{{cssxref("column-count")}}<span class="tlid-translation translation" lang="zh-CN"><span title=""> 。</span></span></dd>
+</dl>
+
+<h3 id="正式语法">正式语法</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="例子">例子</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p class="content-box"&gt;
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+&lt;/p&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css;">.content-box {
+  columns: 3 auto;
+}</pre>
+
+<h3 id="Result">Result</h3>
+
+<p>{{EmbedLiveSample('例子', 'auto', 120)}}</p>
+
+<h2 id="规范">规范</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', '#columns', 'columns')}}</td>
+   <td>{{Spec2('CSS3 Multicol')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("css.properties.columns")}}</p>