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

私のデモからわかるように、それは機能します。ただし、2番目のボックスが両方の列に断片化されているのではないかと心配しています。可能であれば、この要素の断片化を防ぎたいと思います。ボックスを複数の列に断片化しないようにブラウザに指示する方法はありますか？

（2番目と3番目のボックスの両方が2番目の列に簡単に収まることに注意してください。これは私が達成したい配置です。）

4

2 に答える 2

1

おそらく-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;
}
于 2012-06-19T17:33:52.540 に答える