0

column-countに設定されたdivがあり3ます。内部には多数のuls があります。右側に 4 番目の列の始まりが表示されています。3 列を指定したのに、なぜこれが表示されるのでしょうか?

スクリーンショット

HTML (フィドルはこちら: http://jsfiddle.net/B6zDR/3/ )

<!DOCTYPE html>

<html>
    <head>
        <title></title>
        <style type="text/css">
            div
            {
                height: 150px;
                width: 835px;
                padding: 20px;
                overflow: hidden;
                text-overflow: ellipsis;
                -moz-column-count: 3;
                -webkit-column-count: 3;
                column-count: 3;
                background-color: lightblue;
            }

            h2
            {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div>
            <h2>UL #1</h2>
            <ul>
                <li>1</li>
                <li>2</li>
            </ul>
            <h2>UL #2</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <h2>UL #3</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <h2>UL #4</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <h2>UL #5</h2>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        </div>
    </body>
</html>
4

2 に答える 2

2

column-count宣言をオーバーライドできるのは宣言だけですheight。あなたの例でheightは、div要素を制限していますが、3 列のレイアウトを指定しています。したがって、div3 列のレイアウトを強制しようとすると、スペースがなくなり、右側にオーバーフローします。

http://www.quirksmode.org/css/multicolumn.htmlの「テスト #6」を確認してください。

于 2012-12-14T19:34:30.523 に答える
1

まあ、これはあくまでも推測なので、覚えておいてください。

HTML 5column-count属性を変更しても Firefox 17 では何も変更されませんが、変更さmoz-column-countれるため、まだ開発段階にあることを意味しているように思われます。これはバグである可能性が非常に高いです。

于 2012-12-14T19:31:57.417 に答える