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 列布局。因此，您div试图强制采用 3 列布局，空间不足，并向右溢出。

查看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 回答