CSS3列 - 添加第二个元素后的额外宽度

Question

我有一个应用了CSS3列的元素。元素（div.parent）包含min-width和max-width。子元素（article.space）将附加到父元素，填充左列，然后填充右列。

这是带有一个子元素的标记：

<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是矩形的，它们需要填充第一列然后填充第二列，然后如果我将.parent的{​​{1}}设置为更大的数字，则第三列专栏等。

一切都有效。如果我追加的内容超过2 max-width，article.space会扩展为.parent。当只有一个max-width时，article.space的宽度很好，但如果有两个或更多，则会自动将其扩展为.parent集。

这是一些照片:(我为所有白盒道歉，我不能分享这是什么）

Answer 1

看看这个。有什么问题？ http://jsfiddle.net/zMGyp/