html - 将第一个 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

编辑:

已解决按照评论中的建议使用 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

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

这是我的推理:

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

Thefeore 获得你想要的显示是这样的:

<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回答有关如何执行此操作的详细信息。

希望这对您有所帮助。