0

我有一个header div，里面还有 div header-left-box和header-right-box向左浮动并水平并排放置。

在这些之后，我想放置一个 div接收器，它将占用下面的空闲空间。

问题是接收器div 没有显示在另一个之下，它在其他之上，“覆盖”。我能做些什么呢？我希望接收器低于其他 div。

这是代码： 

<html>

<head>
<style type="text/css">
#header {
    position: absolute;
    width: 100%;
    height: 30%;
    margin: 0 auto;
}

#header-left-box {
    position: absolute;
    float: left;
    width: 40%;
    height: 100%;
    margin-left: 0px;
    border: 1px solid blue;
}

#header-right-box {
    position: absolute;
    float: left;
    margin-left: 50%;
    width: 50%;
    height: 100%;
    border: 1px solid red;
}

#header-right-box-content {
    position: absolute;
    bottom: 0;
    left: 0;
}

#header-left-box p {
    position:absolute;
    bottom: 0;
    font-size: 0.9em;  
}

#receiver {
    position: relative;
    width: 98%;
    border: solid 1px green;
}

</style>

<title></title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<div id="header">
    <div id="header-left-box">
        <p>Left header box</p>
    </div>
    <div id="header-right-box">
        <div id="header-right-box-content">
            <p>Right header box</p>
        </div>
    </div>
</div>

<div id="receiver">Receiver</div>    
</body>

</html>
4

4 回答 4

2

使接收器为绝对位置，顶部仅略高于 30%。它会根据您的需要工作。

#receiver {
    position: absolute;
    width: 98%;
    top: 35%;
    border: solid 1px green;
}

检查这个http://jsfiddle.net/8wRte/1/

于 2013-08-11T13:33:09.097 回答
0

接收者是重叠的，因为你#header-left-box和#header-right-box是position:absolute并且接收者是position:relative。您的解决方案是将您的标题左右框定位到relative或将您的接收器定位到absolute并添加一个top:(place height of header left and right boxes here).

这是一个小提琴（http://jsfiddle.net/hRcYF/），一切都在这里positioned:relative。接收器需要float:left (or right)并且#header-right-box需要浮动以使其正常工作。

于 2013-08-11T13:43:23.047 回答
0

我认为你可以更容易地做到这一点，为什么不把#header-left-box{float:left}#receiver #header-right-box{float:right} div 放在上面，因为使用了绝对位置。像这样使用位置不是一个好习惯，因此请尝试从所有不需要的 CSS 元素中删除位置。看这个例子：http: //jsfiddle.net/E7T9F/。不要忘记，您可以在不使用 css::position 的情况下通过不同的技术（如填充和边距）定位元素。

于 2013-08-11T14:04:42.933 回答
0

不是到处都需要绝对定位。撤回它们并确保您没有#header-right-box向左浮动。还要确保您正在清除#receiver. 像这样——

<style type="text/css">
#header {
    /*position: absolute;*/
    width: 100%;
    height: 30%;
    margin: 0 auto;
}

#header-left-box {
    /*position: absolute;*/
    float: left;
    width: 40%;
    height: 100%;
    margin-left: 0px;
    border: 1px solid blue;
}

#header-right-box {
    /*position: absolute;*/
    /*float: left;*/
    margin-left: 50%;
    width: 50%;
    height: 100%;
    border: 1px solid red;
}

#header-right-box-content {
    /*position: absolute;*/
    bottom: 0;
    left: 0;
}

#header-left-box p {
    /*position:absolute;*/
    bottom: 0;
    font-size: 0.9em;  
}

#receiver {
    position: relative;
    clear: both; /*Cleared previously floated elements*/
    width: 98%;
    border: solid 1px green;
}
</style>
于 2013-08-11T14:07:31.933 回答