Question

我正在尝试在内容div上方添加一个div，宽度相同。我希望它只是推下内容div，但它也会导致侧边栏div向下移动。

<div id="container">
    <div id="new-div">new div</div>
    <div id="content">content</div>
    <div id="sidebar">sidebar</div>
</div>

#container {
    background: lightgrey;
    width: 500px
}
#new-div {
    background: darkred;
    width: 300px
}
#content {
    background: lightblue;
    width: 300px;
    height: 400px;
    display: inline-block
   }
#sidebar { 
    background: darkgreen;
    width: 100px;
    height: 400px;
    float: right;
}

http://jsfiddle.net/zd9omqa7/2/

如何避免侧边栏向下移动？我希望它始终漂浮在右上角。

Answer 1

想到的两个最简单的方法是重新排序html，以便你的侧边栏在DOM中排在第一位：

http://jsfiddle.net/ctaylr/xxhdn1xb/1/

<div id="container">
    <div id="sidebar">sidebar</div>
    <div id="new-div">new div</div>
    <div id="content">content</div>

</div>

或使用绝对位置暴力将其移至顶部：

http://jsfiddle.net/ctaylr/warnjgp3/2/

（记得将容器div相对于此位置放置）

否则，您可以将左侧的“div”包装在自己的容器中。

希望这有帮助！

Div高于内容 - 在div之后向下移动

1 个答案: