1

我有 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;
}
4

2 回答 2

0

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

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

请记住，padding 会影响 div 的内部，而 margin 会影响外部。

此代码是否为您提供了您正在寻找的东西？（我添加背景颜色只是为了视觉效果，这样我就可以看到 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 做什么，很难知道还能告诉你什么。希望这可以帮助！

于 2013-03-27T02:08:21.530 回答
0

关于这个问题的变体已经在 SO 上被问了几十次。您想要 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;
}
于 2013-03-27T02:07:37.027 回答