2

我有一个居中的 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 下

ps 我正在使用 display: table 因为我有现场输入类型=图像，我希望宽度与输入类型一样大。

我该怎么做？提前致谢！

4

2 回答 2

2

从 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/

于 2013-02-06T19:33:54.953 回答
1

好吧，不要将你的第一个 div 定位为绝对 --> 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;
}

就是这样。

于 2013-02-06T19:39:38.203 回答