CSS CSS3 列 - 强制非破坏/拆分元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8506783/
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
CSS3 Columns - Force non breaking/splitting element?
提问by Probocop
I'm using some CSS3 columns (column-count: 2;column-gap: 20px;) to split some content into two columns. In my content I have a <p>, followed by a <blockquote>, followed by another <p>.
我正在使用一些 CSS3 列 ( column-count: 2;column-gap: 20px;) 将一些内容分成两列。在我的内容中，我有一个<p>，然后是一个<blockquote>，然后是另一个<p>。
My question: Is there a way of preventing my <blockquote>(or any other specified element) from splitting into two columns?
我的问题：有没有办法防止我的<blockquote>（或任何其他指定的元素）分成两列？
For example, currently my <blockquote>is partially in column 1, and partially in column 2.
例如，当前 my<blockquote>部分位于第 1 列，部分位于第 2 列。
Ideally I'd like to make it so the <blockquote>stays together in either column 1 or 2.
理想情况下，我想让<blockquote>它们在第 1 列或第 2 列中保持在一起。
Any idea if this can be achieved?
知道这是否可以实现吗？
Thanks!
谢谢！
回答by bookcasey
Add display:inline-block;to the item you want to prevent from splitting.
添加display:inline-block;到要防止拆分的项目。
回答by methodofaction
In theory the property you are looking for is...
从理论上讲，您正在寻找的财产是...
blockquote {
column-break-inside : avoid;
}
However, last time I checked it wasn't properly implemented in Webkit, no idea about firefox. I've had more luck with:
但是，上次我检查它没有在 Webkit 中正确实现时，不知道 firefox。我有更多的运气：
blockquote {
display: inline-block;
}
As the renderer treats it as an image and doesn't break it among columns.
由于渲染器将其视为图像并且不会在列之间分解它。
回答by Ricardo Zea
Just general FYI for others that bump into this forum and need a solution for Firefox.
对于遇到此论坛并需要 Firefox 解决方案的其他人，仅供参考。
At the moment writing this, Firefox 22.0 didn't support column-break-insideproperty even with -moz-prefix.
在撰写本文时，Firefox 22.0 甚至不支持column-break-inside带有-moz-前缀的属性。
But the solution is quite simple: Just use display:table;. You can also do **display:inline-block;The problem with these solutions is that the list items will lose their list style item or bullet icon.
但解决方案非常简单：只需使用display:table;. 您也可以这样做 **display:inline-block;这些解决方案的问题是列表项将丢失其列表样式项或项目符号图标。
**Also, one problem I've experienced with display:inline-block;is that if the text in two consecutive list items is very short, the bottom item will wrap itself up and inline with the one above it.
**此外，我遇到的一个问题display:inline-block;是，如果两个连续列表项中的文本非常短，则底部项将自身包裹起来并与其上方的项内联。
display:table;is the least worst of both solutions.
display:table;是两种解决方案中最差的。
More info here: http://trentwalton.com/2012/02/13/css-column-breaks/
更多信息在这里：http: //trentwalton.com/2012/02/13/css-column-breaks/
回答by Tzach
According to MDN, the correct solution is
根据 MDN，正确的解决方案是
blockquote {
break-inside: avoid-column;
}
However this is not yet implementedin all browsers, so a practical solution is:
blockquote {
display: inline-block;
}
