html - 背景无法正确定位

Question

大家好，我是 html 和 css 新手 我想创建 4 个背景，一个在顶部，一个在左边，一个在底部，一个在右边......但不知何故，右边的一个没有显示，另一个工作正常 你能帮我吗？

HTML:

    <div class="header">
    </div>

    <div class="leftheader">
    </div>

    <div class="rightheader">
    </div>

    <div class="bottomheader">
    </div>

CSS

body {
    background-color: #efefef;
    margin: 0px auto;
    font-family: arial

}


.header{
    background: #cccccc;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}

.leftheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left;
    border: 0px solid #000000;
    width: 100;
    height: 590;
}

.rightheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right 10px top 10px;
    border: 1px solid #000000;
    width: 100;
    height: 590;
}

.bottomheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}

Answer 1

实现此功能的关键是在 .leftheader 和 .rightheader 上使用 float: left 和 float: right 元素。然后，您需要通过将 clear: Both 放在 .bottomheader 上来清除 float 。

body {
    background-color: #efefef;
    margin: 0px auto;
    font-family: arial
}
.header {
    background: #cccccc;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}
.leftheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left;
    border: 0px solid #000000;
    width: 100px;
    height: 590px;
    float: left;
}
.rightheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right 10px top 10px;
    border: 1px solid #000000;
    width: 100px;
    height: 590px;
    float: right;
}
.bottomheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
    clear: both;
}

<div class="header">header</div>
<div class="leftheader">leftheader</div>
<div class="rightheader">rightheader</div>
<div class="bottomheader">bottomheader</div>