1

我刚刚实现了使用 css3 列的布局，现在我想知道如何在所有浏览器中强制分列。刚刚搜索了（至少）漏洞互联网并找不到解决方案，因为column-break-before似乎对非 webkit 浏览器中的布局没有影响。Firefox 中似乎没有实现。

基本上，我想要的是，每个标签都有一个特定的类（小提琴中的.break-column-before），分成一个新列。似乎是一项不可能完成的任务。有什么建议么？

基本 HTML

<div class="content">
    <div id="main">
        <h1>Headline 1</h1>
        <p>Text...</p>
        <h2 class="break-column-before">Bastards.</h2>
        <p>More Text...</p>
    </div>
</div>

列生成如下：

-moz-column-width: 280px;
-moz-column-gap: 20px;
-moz-column-rule: 1px dashed #eee;
-webkit-column-width: 280px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dashed #eee;
column-width: 280px;
column-gap: 20px;
column-rule: 1px dashed #eee;

在评论中提到的另一个问题（CSS3 Column Break）中找到的解决方案确实打破了之前的列，但抑制了 div 内的进一步列中断。这对我的布局来说是不可能的，因为它是负责任的并且只有一个水平滚动条。

该网站可以在这里找到：有问题 的网站小提琴（如评论中所建议的）可以在这里找到：jsFiddle

如果纯 css3 是不可能的，我也愿意使用 jQuery 回答。

4

0 回答 0