3

動作する 2 列の CSS のみのグリッドがありますが、両方の列の下に余分なスペースが生じます。

スクリーンショット.

各セルからインラインブロックを削除すると、余分なスペースはそれほど悪くありませんが、グリッドの折り返しを防ぐために必要です。問題は垂直方向の位置合わせにあると推測しましたが、これを追加しても違いはないようです。この余分なスペースを防ぐ方法はありますか?

.columns {
    -webkit-column-gap: 1.5em;
    -moz-column-gap: 1.5em;
    column-gap: 1.5em;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;

}

.columns__cell {
    break-inside: avoid-column;
    column-break-inside: avoid;
    display: inline-block;
    vertical-align: top;
    width: 100%;
}

.columns--2 {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
}

構造：

<div class="column column--2">
    <!-- repeated -->
    <div class="widget__item poll column__cell">
        <div class="widget__head clearfix">
            ***
        </div>
        <div class="widget__body">
            ***
        </div>
    </div> 
    <!-- repeated -->
</div>
4

1 に答える 1

1

float プロパティを使用します。.inner は、colLeft と colRight をネストするコンテナーです。これで問題が解決するはずです。

.inner {
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    margin: 0 auto;
    width: 100%;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.colRight {
    float: left;
    width: 50%;
}
.colLeft {
    padding-right: 10%;
    float: right;
    width: 50%;
}
于 2015-02-05T04:28:25.220 に答える