親を「子要素に合わせて垂直方向に拡張」するにはどうすればよいですか?

親の展開

子要素を垂直方向に配置

HTML では、多くの場合、子要素を組み合わせた高さに合わせて高さを動的に調整する親要素が必要になります。たとえば、親

は2 つの

が含まれる場合があります。子要素。それぞれに異なる内容が含まれます。デフォルトでは、親

は最も背の高い子と同じ高さのみを占めます。ただし、親

の CSS を変更することは可能です。

これを実現するには、次の CSS ルールを親

に適用できます:

overflow: auto;

このルールは、ブラウザで垂直スクロールバーを親

に自動的に追加します。その内容が利用可能な高さを超える場合。その結果、親

は子要素の高さの増加に合わせて垂直方向に拡張されます。

水平スクロールバーの問題と解決策

指定された例では、子コンテンツが次の値を超えた場合に言及されています。ブラウザ ウィンドウの幅に応じて、現在の CSS では親

に水平スクロールバーが導入されます。これを解決してスクロールバーをページ レベルに移動するには、次の CSS プロパティを に追加します。 tag:

body {
  overflow-x: auto;
}

これにより、ページ レベルで水平スクロールバーが作成され、子コンテンツがブラウザ ウィンドウの幅を超える場合にユーザーが水平にスクロールできるようになります。

テーブルを使用した代替ソリューションDisplay

親

の垂直方向の拡張を実現する別のアプローチ親要素には「table」表示プロパティを使用し、子要素には「table-row」表示プロパティを使用することです。これにより、親の

が

となるテーブルのような構造が作成されます。はテーブル コンテナとして機能し、子の

はテーブルの行として機能します。このテーブルベースのアプローチでは、親

の高さは、子要素を組み合わせた高さに合わせて自動的に調整されます。

以上が親を「子要素に合わせて垂直方向に拡張」するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。