3
4

2 に答える 2

3

背景情報

body要素のデフォルトの幅はhtml、ウィンドウの幅 (またはiframeそのような場合は幅) でもある幅です。ブロック レベル要素のデフォルトの動作では、スクロールは実際の要素のみを考慮します (したがって、右側に表示するものが何もない場合、右マージンは考慮されません)。これにより、右マージンの問題が発生します。(ちなみに、この記事によると、スクロールバーは実際には body ではなく html 要素に表示されています。)

為にPosition: Absolute

#wrapperwithを使用するposition: absoluteと、body要素の高さがゼロになります。この場合、これにより下マージンの問題が発生します。

解決策は、次のようにマージンを考慮することです（fiddle を参照）：

body {
    min-height: 320px;
    min-width: 420px; 
}

bodyこれにより、絶対要素の幅 + マージンと高さ + マージンに等しい最小寸法が割り当てられます。

さて、設定した場合に何が起こるかわかりません。right: 0左マージンを強制的に「残す」と、私の意見では、時期尚早のスクロールバーがアクティブになるだけです。このフィドルを参照してください。

それにかんするPosition: Static

デフォルトのブロック レベルの動作は、body 要素にシュリンク ラップのような動作を強制することで変更できます ( fiddle を参照)。

body { display: inline-block; }

注：それbody { float: left; }は私に同じシュリンクラップ動作を与えませんでした（fiddle を参照）。

要素は、そのinline-block内部要素のマージンを考慮して独自の幅を決定し、右マージンが機能できるようにします。

ソリューションがビーイングでdisplay: inline-block;機能しない理由は、幅と高さがゼロになるためです。これは、絶対配置によりその要素がフローから外され、内部にディメンションを与えるものが何も残っていないためです。#wrapperposition: absolutebodybody

上記は現在 IE9 でのみテストされています。

于 2012-05-29T17:15:32.770 に答える
0

残念ながら、簡単で迅速な解決策は 1 つだけです。それは、ラッパー div 内に新しい div を作成することです。

http://jsfiddle.net/QHKmN/2/

CSS

#wrapper {
    background: black;
    height: 300px;
    margin: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 400px;
}

#inwrapper {
    background: green;
    height: 290px;
    margin: 5px auto;
    position: relative;
    width: 390px;
}
​

HTML:

<div id="wrapper">
    <div id="inwrapper">

    </div>
</div>
​

そして、あなたのマージンがあります。

于 2012-05-25T18:04:40.460 に答える