0

この場合、いくつかの div の位置合わせに問題があります。

<div id="preamble" style="margin-bottom: 100px;">Preamble</div>
<div id="container" style="position: relative;">
    <div id="content" style="position: relative; margin-top: 50px;">
        Content
    </div>
</div>

(もちろん、これは回避したい動作を再現する例にすぎません。)

content-div が container-div から整列することを期待していたでしょう。したがって、「プリアンブル」と「コンテンツ」の間には合計 150px が必要です。

ただし、(少なくとも Firefox では) そうではありません。container-div は単純に無視されるため、コンテンツ div の margin-top も、preamble-div の margin-bottom の margin-top より大きくない限り無視されます。

私に何ができる？適用する必要がある追加のcss ルールはありますか? position: relative と html-structure を維持したいと思います。

ありがとうございました！

[編集2]

あなたがまだ私と一緒にいることを願っています;-)

遅れてすみません...これがライブデモです。とても生き生きしているので、問題を説明するために小さな jquery スクリプトも作成しました。ボタンを試してみてください。 ライブデモ

ありがとうございました！

[編集]

方法は次のとおりです。

悪い
(ソース: 666kb.com )

好きなように（国境なしで）

代替テキスト
(ソース: 666kb.com )

画像はぎくしゃくしていますが、違いが明らかであることを願っています;-)

4

3 に答える 3

1

これは、重なっている垂直マージンが折りたたまれているためです。

CSS2仕様には次のように書かれています：

この仕様では、マージンを折りたたむという表現は、2 つ以上のボックス (互いに隣り合っているか、ネストされている可能性がある) の隣接するマージン (空でないコンテンツ、パディング、境界領域、またはそれらを分離するクリアランスがない) が結合して単一のマージンを形成することを意味します。 .

#preambleあなたの場合、margin-bottomと#containerがmargin-top重なっているため、それらは折りたたまれているため、有効な余白は大きい方 (この場合は 100px) になります。

背景色が問題にならない場合は、padding代わりにmargin.

于 2010-02-19T15:36:43.003 に答える
0 
<div id="preamble" style="margin-bottom: 100px;">Preamble</div> 
<div id="container" style="position: relative;"> 
    <div id="content" style="position: relative; margin-top: 50px;"> 
        Content 
    </div> 
</div>

まず、スタイルシートを作成します。多くの要素がある場合に時間を節約し、コードをよりクリーンに保ちます。

コードをテストすると、コンテンツ div がコンテナー内に表示され、上部に 50 ピクセルの余白があることがわかります。どうしたの？

あなたが達成したいのはこれだと思います：

<div id="preamble" style="margin-bottom: 100px; border: solid black 1px;">Preamble
 <div id="container" style="position: relative; border: solid black 1px;"> 
  <div id="content" style="position: relative; margin-top: 50px; border: solid black 1px;"> 
   Content 
  </div> 
 </div> 
</div>

幸運を！Div を他の Div 内にネストしなかったため、合計で 150px にはなりません;)。マージンはセルの外側にあり、パディングはセルの内側にあることを忘れないでください。

HTML構造を同じに保ちたいと今読んだとき、それは不可能です。最初の div に 100px のマージンを与えるとすぐに、次の要素がその要素の下に 100px 配置されることを意味します。そして、ネストされた div next に 50px の上部に余白があるため、合計 150px を超えるスペースを作成することを意味します...

なぜあなたはあなたのhtml構造を維持したいのですか?

于 2010-02-19T14:33:46.123 に答える
0

私はこの奇跡から抜け出す方法を見つけました。騙す...

プロパティを追加すると、overflow: hidden; #container に対して、動作は期待どおりです。

ここで違いを証明できます

それでも、私は完全に納得していません。このトリックで問題が解決するのはなぜですか? 他の方法はありますか?

とにかく助けてくれてありがとう！

于 2010-02-19T18:37:37.413 に答える