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下正好（触摸）

P.S。我正在使用display：table，因为我有输入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/

Answer 2

好吧，不要将你的第一个div置于绝对位置 - ＆gt; http://jsfiddle.net/tPJNg/1/

.div1 {
    overflow: hidden;
    width: 50%;
    height: 65%;
    min-width: 100px;
    min-height: 200px;
    max-width: 200px;
    max-height: 300px;
    background-color: red;
    border: 1px solid #000000;
    margin: 10px auto;
    clear:both;
}

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

就是这样。

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

2 个答案: