Question

出于某种原因，当我向 .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;
}

Answer 1

使用overflow：hidden

.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

添加内容时背景未显示？

1 个答案: