2

我有一个应用了 CSS3 列的元素。元素 ( div.parent) 具有 amin-width和 a 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's设置max-width为更大的数字，第三列等等。

除了一件事，这一切都有效。如果我附加超过 2 article.space，.parent则扩展到它的max-width. 当只有一个article.space时，.parent的宽度很好，但如果有两个或更多，它会自动将其扩展为max-width集合。

这是一些图片：（我为所有的白盒子道歉，我不能分享这是为了什么）

4

1 回答 1

0

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

于 2012-07-05T19:03:15.407 回答