0

我有这样的事情：

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

jsFiddle中的相关代码

如您所见，在顶部和底部 div 之间，有一个 div 容器。我希望这个 div 容器尽可能多地移动底部潜水（而且我不希望它是一个固定值 - 这意味着如果，假设左容器会变得更高 - 底部 div 也将被推下.

我怎样才能做到这一点？

4

4 回答 4

1

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

.bottom {
    clear: both;
}

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

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

我已经相应地修改了您的 jsFiddle，并使正确的 div 更高以显示底部始终显示在下方。

于 2013-01-09T18:15:50.003 回答
1

这是一个看似简单的问题，但最终变得有点棘手。上述关于 position:relative 与 position:absolute 的建议是很好的第一步。之后，您需要为设置宽度右 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 之前：

<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 中测试。）

请参阅：右 div 固定宽度，左 div 扩展到最大宽度？

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

这对你有用吗？

于 2013-01-09T21:00:51.753 回答
0

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

对and应用必要float的值后，使用clearfix hack 将浮动元素包含在容器中。现在，只要任何或div 的高度增加，底部的 div 就会被向下推。.left.right.left.right

于 2013-01-09T18:19:51.263 回答
0

使容器相对和左右绝对，并且用于定位设置宽度而不是使用浮动。

于 2013-01-09T18:55:06.533 回答