停止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

break-inside: avoid根据break-insideCSS多列布局模块中的描述,该设置将执行此操作.但浏览器支持有限,因此您需要另外使用一些其他设置来反映旧草稿中的想法,这些设置在某些浏览器中实现:

.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. :-) */
}

<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>

Answer 2

在.box上添加样式:

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

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