検索

ホームページ >ウェブフロントエンド >CSSチュートリアル >ブラウザウィンドウのサイズを変更すると外側の Div が折りたたまれるのはなぜですか?

ブラウザウィンドウのサイズを変更すると外側の Div が折りたたまれるのはなぜですか?

Susan Sarandon
Susan Sarandonオリジナル
2024-12-15 01:20:17911ブラウズ

Why Does My Outer Div Collapse When Resizing the Browser Window?

外側の

が実行されないのはなぜですか?内側の
を完全に囲みます。サイズ変更時?

内側と外側の

を持つコンテナでは、外側の
内部の

のコンテンツよりも小さな幅に予期せず折りたたまれます。この問題は、ブロック要素の性質に起因する可能性があります。

ブロック要素は通常、親コンテナと同じ幅を占めます。ウィンドウのサイズをより狭い幅に変更すると、外側の

が変更されます。最初は内部の
のコンテンツを収容するために展開されます。ただし、ウィンドウの幅がさらに減少すると、外側の
の幅は内側の
の幅よりも小さくなります。

この問題に対処するには、inline-block と min を組み合わせます。 -width: 100% 使用可能。 inline-block を使用すると、要素がインライン要素とブロック要素の両方として動作できるようになります。 min-width:100% を設定すると、外側の

が 100% になります。その幅が常にコンテンツの幅と少なくとも等しいことを保証します。

更新されたコード

display: inline-block と min-width: 100% を外側の

、内側の
の内容。外側の
を防ぐことができます。ウィンドウのサイズを変更するときに、コンテンツの幅より小さく縮小することを防ぎます。
.demo {
  display: inline-block;
  min-width: 100%;
}

以上がブラウザウィンドウのサイズを変更すると外側の Div が折りたたまれるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

this display issue
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：タッチ デバイスでホバー エフェクトをシミュレートするにはどうすればよいですか?次の記事：タッチ デバイスでホバー エフェクトをシミュレートするにはどうすればよいですか?

関連記事

続きを見る