Question

这对我来说很难解释，但是＆＃34;部分＆＃34;在包含白色盒子的顶部看起来不应该是它应该的高度，它看起来并不像它包含的物品一样大。

这意味着代替下面的部分，坐在它下面，它们实际上坐在一边。

我试图实现的效果是将这些部分垂直堆叠在一起，但要使部分与其内容一样大。

这是我的代码：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

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

要修复它，请在您的部分添加此CSS：

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

Answer 2

您的原始代码错过了</div>结束标记，如下所示：

添加后，问题就消失了。 http://jsfiddle.net/8Ts9c/7/

<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> this tag was missed in your original code -->
</section>
<section>
    <h1 class="centertitle">Our plans include</h1>
</section>

部分内容不如内容大

2 个答案: