1

新しい複数列のレイアウトを使用して複数列のレイアウトを設定しようとしています。しかし、作成された列に柔軟な幅を許可する方法はありますか？
私がオンラインで見たすべての戦略は、コンテンツが列をオーバーフローした場合でも、常に固定幅のレイアウトになります。 

ul {
    -webkit-column-width: 80px;
    height: 80px;
}
<ul>
    <li>element</li>
    <li>elementthat'stoolong</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
    <li>element</li>
</ul>

JSFiddleの例

4

2 に答える 2

1

これを行う方法はないと思うので、結果を<div>sにページングし、それらの各ページのサイズを必要なだけ大きくするという以前のソリューションに戻りました。

于 2012-08-21T20:43:37.880 に答える
0

テキストがオーバーフローしないようにするには、次のことを試してください。

li {
word-wrap: break-word;
}

列幅はピクセルだけでなく、％とemでも設定できるため、より柔軟なレイアウトが可能になります。コンテンツが完全に崩壊するのを防ぐために、もちろん最小幅を設定します。W3.orgによると、列のギャップに及ぶ通常のフローのコンテンツ（長い単語や画像など）は、列のギャップの中央でクリップされます。

于 2012-08-07T19:45:20.393 に答える