【发布时间】：2021-02-18 09:30:45
【问题描述】：
所以我刚刚发现了 css3 columns 规范，并立即看到我可以使用它来“现代化”my forum listing，它使用动态生成的表。
生成表的代码非常复杂，因为它自己决定是否将下一个数据库行的数据放入表中的新行或新列中。使用 css3 列的方式，我假设我可以简单地让代码将数据读入页面并让 css3 决定应该进入哪一列。
不过，我遇到了一些问题。使用时，内容不会按指定的列数拆分。
这里有一些代码供参考：
.2col {
column-count: 2;
column-width: 400px;
column-gap: 10px;
column-rule: 1px solid #e1e1e1;
}
<div class="cats 2col">
<div class="title">
<div class="t">
<h2><a href="#" class="sh" id="t1">-</a> Title 1</h2>
</div>
<section>
<div class="cat">
<p>Category 1<span>This is the first category</p>
</div>
<div class="cat">
<p>Category 2<span>This is the second category</p>
</div>
<div class="cat">
<p>Category 3<span>This is the third category</p>
</div>
</section>
</div>
<div class="title">
<div class="t">
<h2><a href="#" class="sh" id="t1">-</a> Title 2</h2>
</div>
<section>
<div class="cat">
<p>Category 1<span>This is the first category</p>
</div>
<div class="cat">
<p>Category 2<span>This is the second category</p>
</div>
</section>
</div>
</div>
我设置了这个 JSFiddle 进行测试：http://jsfiddle.net/LYoung/JLVEs/1/
显然我做错了什么。谁能帮我确定那是什么以及为什么是错的？
【问题讨论】：
-
注意：除非您只使用 IE10，否则您必须在 css 规则之前添加供应商，例如：
-webkit-colum-*请参阅 caniuse.com：“Can I use CSS3 Multiple column layout?”。 -
不错的提示，但是，我在 jsfiddle 上的 css 类中添加了 -webkit- 前缀，但在那里没有看到任何新的发展。好像没有效果
标签： html css css-multicolumn-layout