防止多列布局中的元素碎片 [英] Prevent element fragmentation in multi-column layout

问题描述

给定此HTML代码：

 < div id =wrapper> 
< div> FIRST BOX：...< / div> 
< div>第二个方块：...< / div> 
< div>第三个方块：...< / 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; 
} 
  

我想使用 CSS多栏布局。

在线演示： http://jsfiddle.net/qYyx4/2/ p>

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

（注意，第二和第三个框可以很容易地适合第二列

解决方案

一些实验导致我：

  -webkit-column-break-inside：avoid; 
  

http://jsfiddle.net/7TXGS/

但是，它不适用于Chrome稳定版/测试版。它可在 Chrome Canary （和Dev）中使用：

Given this HTML code:

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

and this CSS code:

#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;
}

I would like to arrange these 3 boxes into 2 columns using CSS multi-column layout.

Live demo: http://jsfiddle.net/qYyx4/2/

As you can see from my demo at jsFiddle, it works. However, I'm concerned with the second box being fragmented into both columns. I would like to prevent this element fragmentation if possible. Is there any way to tell the browser not to fragment my boxes into multiple columns?

(Note that both the second and third box could easily fit into the second column, which is the arrangement I'd like to achieve.)

解决方案

Some experimentation led me to:

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

However, it doesn't work in Chrome Stable/Beta. It works in Chrome Canary (and Dev):

这篇关于防止多列布局中的元素碎片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！