css - 将一个 div 放在另一个高度未知的 div 下

Question

我有一个居中的 div，其高度取决于用户屏幕分辨率 ( div1 )。我想自动将第二个 div ( div2 ) 准确定位在它下面(再次在中心)，最好不使用计算/javascript 或使用包装表

<div id="div1" class="div1"></div>
<div id="div2" class="div2"><input type=image src=bla.jpg></div>

CSS:

.div1 {
    position: absolute;
    overflow: hidden;
    top: 10px;
    left: 0px;
    right: 0px;
    width: 50%;
    height: 65%;
    min-width: 100px;
    min-height: 200px;
    max-width: 200px;
    max-height: 300px;
    background-color: red;
    border: 1px solid #000000;
    margin: 0 auto;
}

.div2 {
    position: relative;
    display: table;
    overflow: hidden;
    top: 200px;
    border: 1px solid #000000;
    padding: 0px;
    margin: 0 auto;
    background-color: yellow;
    visibility: visible;
}

不工作 jsfiddle:http://jsfiddle.net/Y4kga/黄色的 div 应该恰好(接触)在红色的 div 之下

附注我正在使用 display: table 因为我有 insite input type=image 并且我希望宽度与输入类型一样大。

我应该怎么做？提前致谢!

Answer 1

从您的 div1 中删除绝对定位并将其添加到包装器 div。然后浏览器的布局引擎可以负责将黄色 div 定位在红色 div 的下方。

<div class="wrapper">
    <div id="div1" class="div1"></div>
    <div id="div2" class="div2">lol</div>
</div>

由于 div1 不再绝对定位，您可以使用自动边距水平居中。

.div1 {
margin: 0px auto;
    margin-top: 10px;
}

http://jsfiddle.net/Y4kga/3/