CSS：基本的なレイアウトの質問-ネストされた要素を相互に保持する

StackOverflow https://stackoverflow.com/questions/336073

  •  22-07-2019
  •  | 
  •  

質問

互いに入れ子になった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ハックとして、仕事を遂行する意味的に間違ったハックを使用して、私は確かに理解し、同情することができます。 ）

役に立ちましたか？

解決

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

<div style='background-color:red;overflow:hidden;'>
...
</div>

他のヒント

説明が好きなタイプの場合（<！> quot; do this <！> quot;ではなく）、いくつかの方法を説明する優れた記事を以下に示します。

フロートの単純なクリア

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

フロートのクリア

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

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

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

このセクションを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;
}

多くの場合、実際に機能するレイアウト（特に<！> quot; add <br> with a clear: both style）は実際には<div>を適切にネストしませんが、誰かがブードゥー教徒によって動作するようにCSSを調整しました。実際に要素の境界線を見ると非常に役立ちます。CSSでこれを行うと、デバッグのために境界線をオンにするために実際のマークアップやメインCSSに触れる必要がなくなります。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top