包含栏的Div太高了

时间:2013-07-04 17:19:54

标签: css multiple-columns

(我在堆栈上看过其他一些类似的问题,特别是Extra space at the bottom of CSS columns,但我看不出提问者在他提出的小提琴中遇到的问题,并且尝试该解决方案不起作用反正。)

无论如何,我在我的列下面添加了额外的空格,在div中应用了列宽。 Here's a link举个例子。我的问题是任何列下方的额外蓝色空间。当我删除一个或另一个,它似乎解决了。我可以将容器div缩小到仅使用所需的空间吗?

HTML:

<div class="columns">
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
            <li>checked_out</li>
            <li>checked_out</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>checkouts:</b>
        <ul>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
            <li>checked_out</li>
            <li>checked_in</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>authors:</b>
        <ul>
            <li>author_name</li>
            <li>author_id</li>
        </ul>
    </div>
    <div class="font-console column_div">
        <b>books:</b>
        <ul>
            <li>ttttttytytytytytytytytytytytytytytytytytytytytytytytytyty</li>
            <li>author_id</li>
        </ul>
    </div>
</div>

CSS:

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}    

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
}

2 个答案:

答案 0 :(得分:2)

如果你在谈论蓝色空间,那是因为UL

只需将margin:0放入UL标记

即可
.columns ul {
    margin:0;
}

<强> http://jsfiddle.net/EAqE9/1/

答案 1 :(得分:0)

.columns {
    -webkit-column-count: 3;
    margin: 10px;
    background-color: #0099ff;
}

.column_div {
    -webkit-column-break-inside: avoid;
    background-color: #ff9900;
    display: block;
    margin-bottom: 10px;
}

.column_div:nth-child(3) {
    margin-bottom: 0;
}

.columns ul {
    margin:0;
}

解决垂直间距和列之间缺少边距的一种方法