html - CSS3 列 - 2 番目の要素が追加された後の余分な幅

Question

CSS3 列が適用された要素があります。要素 ( div.parent) には amin-widthと aがありmax-widthます。子要素 ( article.space) は親要素に追加され、左側の列を埋めてから右側の列を埋めます。

1 つの子要素を含むマークアップを次に示します。

<div class="parent" style="height: 888px;">
    <article class="space">
        <header>
            <h3>Header3</h3>
            <h4>Header4</h4>
            <h5>Header5</h5>
        </header>
        <section>
            <img src="" alt="img">
            <p>3:06</p>
        </section>
    </article>
</div>

.parent {
    -webkit-column-width: 190px;
    -webkit-column-gap: 5px;
    min-width: 190px;
    max-width: 410px;
}

.space {
     width: 190px;
     height: 50px;
     display: inline-block;
}

したがって、基本的に、div は長方形の形をしており、最初の列、次に 2 番目の列を埋める必要があります。次に、 をより大きな数に設定すると、3 番目の列などになります.parent。max-width

1つのことを除いてすべて機能します。2 つ以上追加するとarticle.space、 に.parent展開されmax-widthます。が 1 つしかない場合はの幅article.spaceで.parent問題ありませんが、2 つ以上ある場合はmax-widthセットに自動展開されます。

ここにいくつかの写真があります：（すべての白い箱で申し訳ありません。これが何のためにあるのかを共有することはできません）

Answer 1

これを見てください。どうしたの？ http://jsfiddle.net/zMGyp/