Предотвращение фрагментации элементов в многостолбцовой разметке - PullRequest
Новая
       13

Предотвращение фрагментации элементов в многостолбцовой разметке

4 голосов
/ 30 июля 2011

Учитывая этот код: 

#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

Я бы хотел расположить эти 3 блока в 2 столбца, используя многостолбцовый макет CSS .

JSFiddle Demo

Как вы можете видеть из моей демонстрации, это работает. Тем не менее, я обеспокоен тем, что второй блок фрагментирован на обе колонки. Я хотел бы предотвратить эту фрагментацию элемента, если это возможно. Можно ли как-то сказать браузеру не разбивать мои блоки на несколько столбцов?

(Обратите внимание, что и вторая, и третья ячейки могут легко поместиться во второй столбец, что я и хотел бы достичь.)

Ответы [ 2 ]

3 голосов
/ 30 июля 2011

Некоторые эксперименты привели меня к: 

-webkit-column-break-inside: avoid;

http://jsfiddle.net/7TXGS/

Однако в Chrome Stable / Beta это не работает.Работает в Chrome Canary (и Dev):

1 голос
/ 19 июня 2012

Вероятно, использование -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;
}
...