防止多列布局中的元素碎片

Question

鉴于此代码：

#wrapper { 
    border:2px solid red;
    padding:10px;
    width:310px; height:310px;
    -webkit-column-width:150px; -webkit-column-gap:10px;
    -moz-column-width:150px; -moz-column-gap:10px;
    column-width:150px; column-gap:10px;
}

#wrapper > div { 
    width:150px;
    background:#ccc;
    margin-bottom:10px;
    white-space:no-break;
}

<div id="wrapper">
    <div>FIRST BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin. Phasellus vestibulum enim sed dui blandit nec dignissim justo sollicitudin.</div>
    <div>SECOND BOX: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor imperdiet dolor sit amet placerat.</div>
    <div>THIRD BOX: In at libero ipsum, vel cursus ante. Phasellus ac odio in tortor commodo venenati

我想使用CSS multi-column layout将这3个框排列成2列。

JSFiddle Demo

从我的演示中可以看出，它有效。但是，我担心第二个框被分成两列。如果可能的话，我想防止这种元素碎片化。有没有办法告诉浏览器不要将我的盒子分成多个列？

（请注意，第二个和第三个框都可以轻松放入第二列，这是我想要实现的安排。）

Answer 1

一些实验让我：

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

但是，它在Chrome Stable / Beta中无效。它适用于Chrome Canary（和开发）：

Answer 2

可能将-webkit-column-break-after: always;与FIRST BOX一起使用是合适的。

<div id="wrapper">
    <div> FIRST BOX: ... </div>
    <div> SECOND BOX: ... </div>
    <div> THIRD BOX: ... </div>
</div>

这个CSS代码：

#wrapper { 
    border:2px solid red;
    padding:10px;
    width:310px; 
    //height:310px;
    -webkit-column-width:150px; -webkit-column-gap:10px;
    -moz-column-width:150px; -moz-column-gap:10px;
    column-width:150px; column-gap:10px;
}

#wrapper > div { 
    width:150px;
    background:#ccc;
    margin-bottom:10px;
}
#wrapper > div:first-child {
   -webkit-column-break-after: always;
}