1

(私はスタックでこのような他のいくつかの質問、特にCSS 列の下部にある余分なスペースを見てきましたが、質問者が提示したフィドルで問題が発生していることを確認できず、その解決策を試してもうまくいきませんでしたいずれかの方法。）

とにかく、列幅が適用された div の列の下に余分なスペースが追加されています。ここに例へのリンクがあります。私の問題は、列の下に余分な青いスペースがあることです。どちらかを外すと落ち着くようです。コンテナ 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;
}
4

2 に答える 2

2

あなたが青い空間について話しているなら、それはUL.

margin:0ULタグに貼るだけ

.columns ul {
    margin:0;
}

http://jsfiddle.net/EAqE9/1/

于 2013-07-04T17:26:20.520 に答える
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;
}

縦方向の間隔と列間の余白の不足を解決するための 1 つの修正

于 2013-07-04T17:42:32.713 に答える