Question

我有3个div。第一个div位于顶部，位置相对，第二个div位于底部，其位置是绝对的。还有第三个div，我希望它在中间。我希望第三个div位于中间位置，这样无论我改变浏览器的高度，我都希望它与20px填充对齐，具体取决于第一个和第二个。

middle-box{
padding: 20px;
}

.top-box{
width: 265px;
position: relative;
margin: 0px auto;
}

.bottom-box{
width: 25%;
padding: 12px 0 12px;
position: absolute;
bottom: 0px;
min-width: 300px;
}

Answer 1

关于同一个问题的变化已被问过几十次。你想要20px保证金的事实是无关紧要的。整体结构可能很棘手。

我认为这符合您的要求。您可能必须做出的一个妥协是在页眉和页脚上设置固定的高度。

http://jsfiddle.net/Fd6f9/1

.top-box {
    height: 60px;
    position: relative;
}
.middle-box {
    position: absolute;
    top: 70px;
    bottom: 80px;
    left: 20px;
    right: 20px;
    margin: 20px 0;
}
.bottom-box {
    height: 56px;
    padding: 12px 0 12px;
    position: absolute;
    bottom: 0px;
}

Answer 2

如果您选择让底部框“卡在”浏览器窗口的底部，则您的中间框和底部框之间会有一个可变空间，具体取决于中间的内容量-box和查看器浏览器窗口的大小。如果你想在div之间保持一致的间距，你需要删除绝对定位。

另外，我强烈建议将css从类更改为ID（。到＃）。您忘记了中间框上的class / id标记，因此也可能导致问题。

请记住，填充会影响div的内部，而边距会影响外部。

此代码是否可以满足您的需求？（我为视觉添加了背景颜色，所以我可以看到div发生了什么。）

<style type="text/css">
#top-box {
    width: 265px;
    position: relative;
    margin: 0px auto;
    background-color: #DDD;
}
#middle-box{
    margin: 20px 0;
    padding: 20px;
    background-color: #AAA;
}
#bottom-box{
    width: 25%;
    padding: 12px 0 12px;
    bottom: 0px;
    min-width: 300px;
    background-color: #888;
}
</style>
</head>
<body>
<div id="top-box">something in the top goes here</div>
<div id="middle-box">something in the middle here.</div>
<div id="bottom-box">something at the bottom.</div>
</body>

如果不知道你计划用这些div做什么，很难知道还能告诉你什么。希望这有帮助！

如何在绝对位置和相对位置之间对齐div

2 个答案: