将第一个 div 放在其他两个下方 - 都有可变高度

Question

我正在尝试将 3 个 div（我们称之为 div1、div2 和 div3）放入一个宽度为 700 像素的容器 div 中。我要管理的是 div1 的内容在源代码中较高，但在网页中可见较低（请参见附图）。

<div id="container">
<div id="div1">content of the div1</div>
<div id="div2">content of the div2</div>
<div id="div3">content of the div3</div>
</div>

我无法解决的问题是，所有 3 个 div 都可能具有可变高度。所以我不能使用 position:absolute;top: x px;或 padding-top: x px

请求布局的图片： http://snapshot.own.cz/divs.png

编辑：

已解决按照 cmets 中的建议使用 JS（加载后的 JS 获取 div2 的实际高度并将 top: value 设置为 div1）

$(document).ready(function() {
var newtop = $('#div2').height() ;
$('#div1').css("top",newtop); 
        });

<style>
#container{
    width: 700px;
    clear: both;
}
#div1{
    width: 700px;
    background: red;
    float: right;
    position:relative;
    top:20px;
}
#div2{
    width: 500px;
    height: 200px;
    background: blue;
    float: left;
    position: absolute;
}
#div3{
    width: 200px;
    background: green;
    float: left;
    position:absolute;
    left: 500px;
}
</style>

<div id="container">
<div id="div1">content of the div1</div>
<div id="div2">content of the div2</div>
<div id="div3">content of the div3</div>
</div>

Answer 1

我已尝试为您尝试做的事情找到一些解决方法。但考虑到您正在尝试做的事情，这是不可能的。如果你愿意为你的元素设置固定的高度，那么这种事情是可行的。

这是我的推理：

如果您要保留相对定位，这意味着页面的流动是守恒的。因此，首先显示第一项，然后显示第二项，依此类推。为了将第一个div 从页面流中取出并放在底部，您必须将其定位不同。如果您将其从页面的正常流程中取出，那么您不能使用其他元素的预先确定的高度，因为它不在同一流程中。

获得你想要的显示的方法是这样的：

<div id="container">
    <div id="div2">
        2
    </div>
    <div id="div3">
        3
    </div>
    <div id="div1">
        <p>Some text here!</p>
    </div>
</div>

使用这个 css

* {
    border: 1px solid red;
}
#container {
    position:relative;
}
#div1 {
    clear: both;
    background-color: green;
    width: 100%;
}
#div2 {
    float: left;
    width: 49%;
    background-color: blue;
}
#div3 {
    float:left;
    background-color: gray;
    width: 49%;
}

如果您绝对需要更改页面的流程，则需要使用 JavaScript 获取第一个 div，然后在页面加载时将其插入到第二个 div 之上。有关如何执行此操作的详细信息，请参阅this 答案。

希望这会有所帮助。

Answer 2

使用float 元素尝试此代码。

<div style="width: 704px; padding: 10px;">
    <div style="border: 1px solid red; height: 200px;width: 500px; float: left"></div>
    <div style="border: 1px solid blue; height: 200px;width: 200px;float: right;"></div>
    <br />
    <div style="border: 1px solid green; height: 400px;width: 702px;float: left;"></div>
</div>

看看这个jsFiddle