CSS でフローティング要素を使用して同じ高さの列を作成するにはどうすればよいですか?

フローティング要素を含む同じ高さの列の作成

2 つの子 div を含む親 div を特徴とするページ レイアウトでは、子 div の 1 つがコンテンツが増えると、親 div の高さが拡張されます。ただし、他の子 div はそれに応じて高さを調整できない場合があります。この問題は、特定の CSS プロパティを適用することで解決できます。

両方の子 div の高さを同じにするには:

1. 親要素:

   • オーバーフローを追加: コンテンツが外部に流出するのを防ぐために非表示にします。親。
   • 次の子の絶対位置の場合は、位置: 相対を設定します。
   • 幅を使用: 100% を使用して、親が利用可能な幅全体に広がるようにします。

2. .child-right要素:

   • 視覚分析用に一意の色を割り当てます (例: 背景: 緑)。
   • 高さが親と一致するように高さを 100% に設定します。
   • 幅を親の半分に設定するには、幅: 50% を使用します。 width.
   • 親内での絶対配置の場合は、position: ABS を追加します。
   • 親の右端に対して同一平面上に配置するには、right: 0 を設定します。
   • 上を設定: 0 を指定すると、親の上端と同じ高さに配置されます。

これらを適用することで、 CSS プロパティでは、両方の子 div の高さが同じになり、視覚的にバランスの取れたレイアウトが確保されます。

以上がCSS でフローティング要素を使用して同じ高さの列を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。