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可能都有varibale height 。所以我不能使用position：absolute; top：x px;或填充顶部：x px

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

修改

解决使用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

位于第一个div低于其他两个 - 所有都有可变的高度

2 个答案: