Question

考虑你有这样的代码，请阅读评论，因为我认为这会更容易理解：）

<div class="container">
<div class="inner_container">

<div class="left">
This div sometimes expands to the right and pushes right div off the screen
</div>

<div class="right">
bla bla bla
</div>

</div>
<div id='bottomcontent'>
This content is below both of the divs, and when div '.right' expands down, I don't want this div pushed down as well, but have the 'right' div go under it/or just make those parts disappear and not push this div down.
</div>

</div>

这是CSS：

.container {
    width: 796px;
    overflow:hidden;
}
.left {
    float: left;
    width: 256px;
}
.inner_container{
    width: 1396px;
}
.right {
    float: left;
    width: 796px;
}

非常感谢大家，如果您有任何问题，我会尽最大努力解释一些可能让您感到困惑的事情，谢谢！：）

Answer 1

我认为你可以在这里使用overflow属性。对不起，如果我错了，因为我无法清楚地理解你的背景。

你可以试试这个：

.left {
    float: left;
    width: 256px;
    overflow:scroll; 
}

避免将右侧div推离屏幕。

对于bottomcontent类，您可以尝试使用position：absolute

Answer 2

你可以像这样使用position：absolute：

#bottomcontent {
    position: absolute;
    top: 30px;
    left: 256px; /* same as width of .left */
    background-color: white; /* if you dont want to see .right through #bottomcontent */
}

jsFiddle

当内容扩展时，不要低于div。

2 个答案: