Question

我有一个div column-count设置为3。里面有很多ul个。我看到右侧第4列的开头 - 当我指定3列时，为什么会出现这种情况？

Screenshot

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>

Answer 1

唯一可以覆盖column-count声明的是height声明。在您的示例中，您正在限制height元素的div，但指定3列布局。因此，您的div正在尝试强制使用3列布局，空间不足，并向右溢出。

在http://www.quirksmode.org/css/multicolumn.html

上查看“测试＃6”

Answer 2

好的，所以这只是猜测所以请记住这一点。

由于更改HTML 5 column-count属性并未改变Firefox 17中的任何内容，moz-column-count确实如此，这似乎意味着它仍处于开发阶段。这很可能是一个错误。

CSS列显示不正确

2 个答案: