0

我页面中的最后一个祖先 div 需要在所有四个边都有一个边距，以使其具有面板效果。这是我的代码：
CSS：

html, body {
height: 100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#bibletree {
width: 20%;
float: left;
height: 100%;
}
.inner {  /*this is the div that I need a margin around, so it is by 10px of the #bibletree div on all sides, including the bottom.*/
overflow: auto;
}

HTML：

<div id="wrapper">
<div id="bibletree">
<div class="inner">my content here, both short and long</div>
</div>
</div>

正如您可能猜到的那样，这里发生的事情比所写的要多得多。我有几个带有 div 的列，它们都需要这个边距来实现.innerdiv 上的面板效果。谢谢你的帮助。

顺便说一句，我尝试过绝对定位，它仅基于窗口定位，而不是父元素，即使我将父元素设置为position: relative.

4

2 回答 2

1

如果将 .inner 设置为宽度 100% 并添加边距，它将比其容器宽。您可以设置填充或边框。例如，您可以添加 10 像素的白色或透明边框。

另一种选择是使 #bibletree 位置相对，然后使 .inner 位置绝对并指定顶部、底部、右侧和左侧：

.inner {
    bottom: 10px;
    top: 10px;
    left: 10px;
    right: 10px;
    position: absolute;
}

这将使它的大小与#bibletree 相同，每边减去 10 像素。

于 2012-09-04T08:33:56.203 回答
0

边距：10px 工作正常吗？您无需指定内部 div 的宽度，因为 div 已经具有块选项。在这里查看更新的演示http://jsfiddle.net/QShRZ/5/

于 2012-09-04T08:42:18.817 回答