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

让这一点发挥作用的关键是在float: left和float: right元素上使用.leftheader和.rightheader。然后，您需要将clear: both放在.bottomheader上来清除您的花车。

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>

背景无法正确定位

1 个答案: