4

鉴于此代码：

#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 多列布局将这 3 个框排列成 2 列。

JSFiddle 演示

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

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

4

2 回答 2

3

一些实验使我：

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

但是，它在 Chrome 稳定版/Beta 版中不起作用。它适用于Chrome Canary（和 Dev）：

于 2011-07-30T19:28:47.423 回答
1

可能-webkit-column-break-after: always;与 the 一起使用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;
}
于 2012-06-19T17:33:52.540 回答