停止CSS3列打破段落

Question

在使用CSS3列时，如何停止浏览器分解段落？我有这段代码：

<div class="container">
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
    <div class="box"><!-- text --></div>
</div>

.container {
    column-count: 3;
 }

这是我想要的直观表达。在左边，默认情况下会发生什么，在右边，我想要发生什么。

如果列长度不等，我不介意，重要的是没有任何div在列之间被打破。

Answer 1

根据CSS多列布局模块中break-inside的说明，设置break-inside: avoid会执行此操作。但是browser support是有限的，因此您需要额外使用一些其他设置来反映旧草稿中的想法，并在某些浏览器中实现：

＆＃13;

＆＃13;

.container {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
 }
div.box { 
  text-indent: 1em; /* To show paragraph starts. */
  page-break-inside: avoid; /* For Firefox. */
  -webkit-column-break-inside: avoid; /* For Chrome & friends. */
  break-inside: avoid; /* For standard browsers like IE. :-) */
}

＆＃13;

<div class="container">
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph, too.</div>
    <div class="box">This is yet another short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This, too, is a short paragraph.</div>
    <div class="box">This is a longer paragraph, which may get divided into two columns..</div>
    <div class="box">This is a short paragraph.</div>
    <div class="box">This is a short paragraph.</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在.box上添加样式：

.box {
    display:inline-block;
    ... other styles ...
}

演示：http://jsbin.com/murog/1/