ホームページ >ウェブフロントエンド >CSSチュートリアル >サイズを変更すると、外側の「内側」が含まれないのはなぜですか?

サイズを変更すると、外側の「内側」が含まれないのはなぜですか?

Why Doesn't My Outer `` Contain My Inner `` When Resized?

なぜ外側の

はここで内側の

が完全に囲まれていません?

問題:

提供されたコードスニペットでは、内側の

の内容が外側の

を妨げません。ウィンドウのサイズを変更したときに縮小しないようにします。その結果、内部の

は次のようになります。

ディスカッション:

この問題は、外側の

が外側にあるために発生します。固定幅に設定されます。デフォルトでは、块元素（ブロック要素）の幅は親要素に基づいています。ただし、内部の

は外側の

の幅を超えるコンテンツが含まれているため、オーバーフローが発生します。

解決策:

外側の

を作成するには、内側の

をラップする場合は、inline-block と min-width:100% の組み合わせを利用できます。外側の

を設定することで、 inline-block にすると、その幅は親ベースではなくコンテンツベースになります。 min-width:100% を追加すると、外側の

が確実に拡張されます。

更新されたコード:

.demo {
  ...
  display:inline-block;
  min-width:100%;
}

この変更により、外側の

が可能になります。コンテンツに基づいて自動的にサイズ変更され、内側の

が変更されるのを防ぎます。外にこぼれないようにします。

以上がサイズを変更すると、外側の「内側」が含まれないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

続きを見る