html - 部分不如里面的内容大

Question

这对我来说很难解释，但是顶部包含白框的“部分”似乎没有达到应有的高度，它似乎没有包含的元素那么大.

这意味着它们实际上不是坐在它下面的部分，而是坐在旁边。

我想要达到的效果是将各个部分垂直堆叠在一起，但要使这些部分与其内容一样大。

这是我的代码:http://jsfiddle.net/8Ts9c/6/embedded/result/

<section>
    <div class="container">
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
        <div class="price last">
            <img src="" />
            <span class="allocation">1</span>
            <span class="value">1</span>
        </div>
    </div>
</section>
<section>
    <h1 class="centertitle">Our plans include</h1>
</section>

Answer 1

这是因为每个 child 都在漂浮。 parent section在通常的流程中没有任何元素，那么它的高度没有明确定义。

要修复它，请将此 CSS 添加到您的部分:

section {
    min-height: 200px;
    overflow: hidden;
}