将第一个 div 置于其他两个 div 下方 - 全部具有可变高度

Question

我试图将 3 个 div（我们称它们为 div1、div2 和 div3）放入一个宽度为 700px 的容器 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

编辑：

已解决按照评论中的建议使用JS（加载后的JS获取div2的真实高度并将top：值设置为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 的顶部页面加载时的 div。请参阅此 回答有关如何执行此操作的详细信息。

希望这有帮助。

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