1

出于某种原因，当我向.left-section添加宽度和高度时，.section-page-layout-container不会展开并显示背景，但是如果我向.section-page-layout-container添加高度，则背景渐变完美地重复，每个像素都被填充。

我尝试弄乱代码，但似乎没有任何效果。一定是另一个愚蠢的错误。

希望各位好心人能帮帮我:)

提前致谢！

我的 HTML

    <section class="section-page-layout-container">
        <div class="section-page-layout">
            <div class="left-section">
                <header>

                </header>
            </div>
            <div class="right-module-section">

            </div>
        </div>
    </section>
    <div class="clear"></div>

我的 CSS

.section-page-layout-container {
    background:#984B09;
    background: url('../img/section-page-oj_gradient-background.png') repeat-y;
    background-size:contain;
    width: 100%;
}
.section-page-layout {
    width: 1280px;
    position: relative;
    margin: 0 auto;
    height: auto;
}
.left-section {
    width: 585px;
    height: 500px;
    background: #000000;
    float: left;
}
4

1 回答 1

4

使用溢出：隐藏

.section-page-layout-container {
    background:#984B09;
    background: url('../img/section-page-oj_gradient-background.png') repeat-y;
    background-size:contain;
    width: 100%;
    overflow: hidden;
}

当您在对象内浮动对象时，容器会折叠，这就是您需要 clearfix 的原因

于 2013-03-13T10:18:21.690 回答