5

div を互いに入れ子にしていて、内側の div の 1 つが浮かんでいる場合、外側の div はその周りに展開されないことがわかり続けています。

例：

<div style='background-color:red; '>
    asdfasdf
    <div style='float:left; background-color:blue; width:400px; height:400px;'>
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
        asdfasdfasdfasdfasdfasdfasdf<br />
    </div>
    asdfasdf
</div>

内側の div をカバーするには、外側の div に何をする必要がありますか? IE: 境界線/背景色を全体に配置しますか?

また、私がここでぶつかっている一般原則はありますか? もしそうなら、それが何であるかをしっかりと理解するには、何を調べればよいでしょうか?

ありがとう！

編集

こんにちは、みんな、

答え、意味的に正しい、いいえ、そしてリンクをありがとう。

私は最終的な作業でオーバーフローを使用することになりますが、Ant P の回答は受け入れられたままにします。これは、実際に機能した最初の回答であり、意味論的感覚を害したとしても、短期間のジャムから抜け出すことができたからです。

まともなcssレイアウトに移行しようとしている長年のhtmlハックとして、私は確かに意味的に間違ったハックを使用して仕事を成し遂げることを理解し、共感することができますが、彼はこの後にその習慣を変えると確信しています= o)

4

6 に答える 6

14

overflow:hiddenを使用して CSS で厳密に行うことができます

<div style='background-color:red;overflow:hidden;'>
...
</div>
于 2008-12-03T03:58:34.750 に答える
4

あなたが（単に「これを行う」よりも）説明が好きなタイプなら、いくつかの方法を説明するいくつかの優れた記事があります：

フロートの簡単なクリア

構造マークアップなしでフロートをクリアする方法

フロートのクリア

于 2008-12-03T08:34:58.640 に答える
3

これは、SO に関する CSS のいくつかの質問の基本的な問題である回数に驚かされます。さらに驚くべきことは、誰かが Ant P のような答えを何回与えるかです。技術的には正しいですが、意味的には完全に正しくありません。テミスは絶対に正しいです。overflow:hiddenフローティング div の親に追加するだけです。IE でうまく動作させるには、幅または高さを指定する必要がある場合があります。本当にそれだけです。

于 2008-12-03T05:33:57.040 に答える
1

投稿された回答に勝るものはありませんが、マークアップを台無しにすることなくレイアウトの問題を診断するのに役立つヒントがあります。

このセクションを CSS ファイルの最後に追加し、不要な場合はコメントアウトしておいてください。

div
{
   border-width: thin !important;
   border-color: Orange !important;
   border-style: solid !important;
}

label, span, /* whatever else you might want to see */
{
   border-width: thin !important;
   border-color: Blue !important;
   border-style: solid !important;
}

多くの場合、実際に機能するレイアウト (特に「add a <br>with a clear: bothstyle」を使用するレイアウト) は実際には<div>適切にネストされませんが、ブードゥー教で機能するように誰かが CSS を微調整しています。 CSS でこれを行うと、デバッグのために境界線をオンにするために、実際のマークアップやメインの CSS に触れる必要がなくなります。

于 2008-12-03T15:26:46.187 に答える
1

外側の div だけをフロートすると、ネストされた div を含むように展開されます。通常、レイアウト内でフローティング要素と非フローティング要素を組み合わせるのは面倒です。

于 2008-12-03T04:04:41.337 に答える
0

CSS システムに関するこの記事は、一読の価値があります。Darko Z が言ったように、Ant P によって与えられた意味的に間違った答えを見るのは驚異的です.

于 2008-12-03T08:45:15.937 に答える