1 つの Div が残りのスペースを占めるように 1 つの Div を 2 つの部分に分割するにはどうすればよいですか?

XHTML/CSS で Div を使用して完全な水平分割を実現する方法

外側の div 内に幅 100% で div をネストしました。ネストされた div の幅を 2 ​​つの部分に分割し、1 つの div が残りのスペースをもう 1 つの div の後に占めるようにしたいとします。問題は、最初の div のサイズは内容によって異なるため、その幅を指定しないことです。

隠しオーバーフローの魔法

解決策は、overflow: hidden; を使用することです。この CSS プロパティは、フロート要素に隣接する要素がフロートの境界を超えて拡張することを防ぎます。

HTML 構造

次のように HTML を調整し、# 文字を適切な ID に置き換えます。

CSS スタイル

次の CSS を実装します:

IE 6 サポート

IE 6 サポート用のオプションの CSS (必要な場合):

Result

これらの変更により、#inner2 は残りの水平方向のスペースを占有し、ネストされた div 間で利用可能な幅をきちんと動的に分割します。

以上が1 つの Div が残りのスペースを占めるように 1 つの Div を 2 つの部分に分割するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。