0

私のページの最後の祖先 div には、パネル効果を与えるために、4 つの側面すべてに余白が必要です。これが私のコードです:
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のパネル効果のためにすべてこのマージンが必要な div を持ついくつかの列があります.inner。助けてくれてありがとう。

ところで、絶対配置を試してみましたが、親を に設定しても、親要素ではなく、ウィンドウに基づいてのみ配置されposition: relativeます。

4

2 に答える 2

1

.inner を width 100% に設定してマージンを追加すると、コンテナーよりも幅が広くなります。代わりにパディングまたはボーダーを設定できます。たとえば、10px の白または透明な境界線を追加できます。

もう 1 つのオプションは、#bibletree の位置を相対的にし、次に .inner の位置を絶対にし、上、下、右、左を指定することです。

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

これにより、#bibletree と同じサイズになり、各辺が 10 ピクセル減ります。

于 2012-09-04T08:33:56.203 に答える
0

Margin:10px は正しく動作していますか?? divにはすでにブロックオプションがあるため、内側のdivの幅を指定する必要はありません。ここで更新されたデモを確認してくださいhttp://jsfiddle.net/QShRZ/5/

于 2012-09-04T08:42:18.817 に答える