Html CSS 列中断？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6424088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS column breaks?
提问by McShaman
I have been trying CSS columns, but I can't get breaks to work. Here's the CSS so far:
我一直在尝试 CSS 列，但我无法休息。这是到目前为止的CSS：
#container {
width: 500px;
column-count: 3;
-moz-column-count: 3;
-webkit-column-count: 3;
}
h1 {
break-after: always;
-moz-column-break-after: always;
-webkit-column-break-after: always;
}
And here's the relevant HTML:
这是相关的 HTML：
<div id="container">
<h1>The header of the first column</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Maecenas interdum mattis leo, id vehicula sapien ultricies et.</p>
<p>Donec orci nunc, rhoncus ut convallis a, pretium quis elit.</p>
<p>Aenean vulputate vulputate bibendum.</p>
<p>Fusce imperdiet velit quis diam fermentum ut volutpat ipsum convallis.</p>
</div>
No matter if I do break-after: avoid, break-after: always, break-before: avoidor break-before: alwaysI still get the same result. Nothing changes. Can somebody help me out? I have tested it in Firefox 4.6 and Safari 5.0.5.
不管我做break-after: avoid，break-after: always，break-before: avoid或者break-before: always我仍然得到同样的结果。没有什么改变。有人可以帮我吗？我已经在 Firefox 4.6 和 Safari 5.0.5 中对其进行了测试。
Thanks
谢谢
采纳答案by Грозный
回答by Joe
The CSS column break rules are poorly supported, but I've found a workaround that does something close enough. Instead of writing this:
CSS 分栏规则的支持很差，但我找到了一种解决方法，可以做一些足够接近的事情。而不是写这个：
<div class="columns">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
I'm writing this:
我在写这个：
<div class="columns">
<div class="keeptogether">
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</div>
Then the CSS looks like this:
然后 CSS 看起来像这样：
div.columns {
column-width: 300px;
-moz-column-width: 300px;
-webkit-column-width: 300px;
}
div.keeptogether {
display: inline-block;
width: 100%;
}
You can see the results here, for example.
回答by phdphd
I encountered the same kind of issue and solved it as follows.
我遇到了同样的问题，并按如下方式解决。
My main issue was not inserting a break after each "heading/paragraph" block but avoiding a column break inside a "heading/paragraph" block.
我的主要问题不是在每个“标题/段落”块之后插入中断，而是避免在“标题/段落”块内插入分栏。
The solution is easy :
解决方案很简单：
Enclose each "heading/paragraph" block in a span tag.
In the CSS, add a reference to the span tag, with the following code in it :
display: inline-block; width: 100%;
将每个“标题/段落”块括在 span 标签中。
在 CSS 中，添加对 span 标签的引用，其中包含以下代码：
显示：内联块；宽度：100%；
The little drawback is that this may leave blank areas at the bottom of some columns.
一个小缺点是这可能会在某些列的底部留下空白区域。
In my case the whole css is as follows (div defines the global formatting of the data flow):
在我的例子中，整个 css 如下（div 定义了数据流的全局格式）：
div {
-webkit-column-width: 20em; /* 20em wide */
-webkit-column-gap: 2em; /* 2em gap */
-webkit-column-rule: 1px solid #eee; /* 1px border between columns */
-webkit-column-count: 3; /* 3 columns max! */
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #eee;
-moz-column-count: 4;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-rule: 1px solid #eee;
-ms-column-count: 3;
column-width: 20em;
column-gap: 2em;
column-rule: 1px solid #eee;
column-count: 3;
padding: 5px;
}
.tokeeptogether {
display: inline-block;
width: 100%;
}
回答by Marcus Olsson
Column breaks have never been supported in previous versions of Safari - my guess this is still the case. It is rather weird that Apple have written that it is supported since 3.0 though (Safari documentation about column breaks) ...
以前版本的 Safari 从未支持过分栏符 - 我猜现在仍然如此。很奇怪的是，Apple 已经写到它从 3.0 开始就被支持了（关于分栏符的 Safari 文档）......
Same goes with Firefox. Chrome is the only browser which supportes almost all, if not all, column controls.
Firefox 也是如此。Chrome 是唯一支持几乎所有（如果不是全部）列控件的浏览器。
回答by Stein G. Strindhaug
It seems the h1 in the sample is exactly big enough to always cause a break after it, if you shorten it to just "The head", the break-after has an effect.
样本中的 h1 似乎正好足够大，总是会在它之后引起中断，如果将其缩短为“头部”，则中断后会产生影响。
回答by Virgilivs
If I'm not mistaken, you want the header to go across all columns and let only the following siblings to be split, right?
I'm afraid column breaks still do not work as intended, so - it may not be the most "orthodox" solution, but saved me - I fixed this with some funky styling:
如果我没记错的话，您希望标题跨越所有列并只拆分以下兄弟姐妹，对吗？
恐怕分栏符仍然无法按预期工作，因此 - 它可能不是最“正统”的解决方案，但救了我 - 我用一些时髦的样式修复了这个问题：
Essential HTML:
基本 HTML：
<div class="container">
<h1>Header</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
<p>Third paragraph</p>
</div>
Essential CSS:
基本 CSS：
.container{
column-count:3; /* Add necessary prefixes */
padding-top:2em;
position:relative;
}
.h1{
position:absolute;
top:0;
}
Absolute positioning exempts that element from the columns flow and seems to work just fine.
绝对定位将该元素从列流中排除，并且似乎工作得很好。
P.S.: just noticed the post is rather old...well, I hope this helps someone else, support for these CSS properties hasn't improved thatmuch
PS：刚刚发现的职位是相当老了......好了，我希望这可以帮助别人，这些CSS属性的支持并没有改善是多少
回答by mr_reamer
break-after:
is incorrect, should be:
不正确，应该是：
column-break-after
also, no one has mentioned these properties:
此外，没有人提到这些属性：
-webkit-column-span: all;
-moz-column-span: all;
column-span: all;
which sound like they could be useful here
听起来它们在这里很有用
edit: also, it should be mentioned that support for columns is now pretty decent actually, albeit with the use of vendor prefixes.
编辑：另外，应该提到的是，尽管使用了供应商前缀，但实际上现在对列的支持相当不错。
column-fill
is still not supported by most browsers but AFAIK the majority of other properties are
大多数浏览器仍然不支持，但 AFAIK 大多数其他属性都支持
