別の Div の後の残りのスペースを内部 Div で埋めるにはどうすればよいですか?

別の Div の後の残りのスペースに内部 Div 幅を設定する方法

xHTML と CSS では、次のことが必要なシナリオに遭遇する可能性があります。外側の div 内に、100% の幅が定義された複数のネストされた div があります。最初の div の幅はその内容によって決まり、内部 div を 1 行で表示したいとします。

これを実現するには、次のテクニックを利用できます:

ステップ1: ネストされた Div にインライン表示を使用する

同じ行に表示されるように、ネストされた Div の 'display' プロパティを 'inline' に設定します。

ステップ2: 外側の Div のオーバーフローを非表示に設定します

「overflow: hidden;」を適用します。

ステップ 3: 最初のネストされた Div の幅を自動に設定する

最初のネストされた div (#inner1) の幅は「auto」として未指定のままにしておきます。これにより、コンテンツに基づいて必要な幅に拡張できます。

ステップ 4: 2 番目にネストされた Div のオーバーフローを非表示に設定します

「overflow: hidden;」を適用します。 2 番目のネストされた div (#inner2) に追加して、外側の div の残りのスペースを超えて拡張しないようにします。

コード例:

<div>

追加の考慮事項:

IE 6 との互換性を確保するには、提供された回答で説明されているように、HTML 条件付きコメントを使用して CSS を追加する必要がある場合があります。

この手法を使用すると、内部 div は次のようになります。 2 番目の div は外側の div の残りのスペースを占めるように自動的に調整され、インラインで表示されます。

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