Question

我有这样的事情：

<div class="top">top</div>
<div class="container">
    <div class="left">left</div>
    <div class="right">right</div>
</div>
<div class="bottom">bottom</div>

Relevant code in jsFiddle

正如您所看到的，在顶部和底部div之间，有一个div容器。我希望这个div容器尽可能多地移动到底部潜水（我不希望它是一个固定值 - 这意味着，如果，让我们说左侧容器将变得更高 - 底部div也会被推下来

我该怎么做？

Answer 1

现在你正在使用左/右div的绝对位置，所以你总是需要知道高度才能正确定位底部div。你想要做的是浮动这些，然后清除底部div中的浮动。这样左/右可以和它们的内容一样高，底部div总是出现在下面。

.bottom {
    clear: both;
}

.left {
    float: left;
    width: 50%;
    min-height: 50px;
}

.right {
    float: right;
    width: 50%;
    min-height: 150px;
}

我已modified your jsFiddle accordingly，并将右侧div设为更高，以显示底部始终显示在下方。

Answer 2

这是一个简单的看似问题，最终会变得有点棘手。以上关于立场的建议：相对与位置：绝对是一个良好的第一步。之后你需要为设置宽度右边的div做一些空间：

.left {
    height: 100%;
    min-height: 50px;
    border:1px dashed red;
    padding-right: 50px;      <---
}

然后将你的右div漂浮在你所创造的空间中：

.right {
    float:right;              <---
    width: 50px;              (This needs to match the padding-right value above.)
    text-align: right;
    min-height: 50px;
    height: 100%;
    border:1px dashed blue;
}

最后，在html中将左侧div放在右边：

<div class="top">top</div>
<div class="container">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="bottom">bottom</div>

（在Chrome和IE中测试过。）

请参阅：Right div fix width, left div extend to max width?

你可以在这里查看一个小提琴：http://jsfiddle.net/x3QfG/1/

这对你有用吗？

Answer 3

使用floats而不是绝对定位它们。这将使您的架构非常流畅和灵活。

在对float和.left应用必要的.right值后，请使用 clearfix 黑客来容纳容器中的浮动元素。现在，只要.left或.right div的任何高度增加，底部div就会被推下。

Answer 4

使容器相对和左右绝对，以及定位设置宽度而不是使用float。

Div没有移动附近的div

4 个答案: