別の内部 div の幅が動的に設定された後、内部 div が残りの水平スペースを埋めるようにするにはどうすればよいですか?

内部 Div の幅の設定

ネストされた div と柔軟なコンテンツを操作する場合、各 div の適切な幅を決定するのは困難な場合があります。この質問では、別の内部 div の幅を考慮した後、内部 div の幅を残りの水平方向のスペースに設定する手法について説明します。

HTML 構造:

HTML 構造は、1 つの外部 div と 2 つのネストされた内部 div で構成されます:

<div>

問題ステートメント:

目標は、#inner2 div が残りの水平方向を埋めることです。 #inner1 div の幅の後のスペースは、その内容に基づいて動的に決定されます。

謎の成分: オーバーフロー: 非表示

このレイアウトを実現する鍵は、次の使用です。 CSS プロパティのオーバーフロー: 非表示。外側の div (#outer)。これは、フローティングされた子を独自の境界内に制限するようにブラウザに指示します。

改訂版 HTML:

CSS を効果的に適用するには、div ID は有効な CSS 構文に従う必要があります。

<div>

CSS ソリューション:

#outer {
  overflow: hidden;
  width: 100%;
  /* Styling for illustration purposes */
  border: solid 3px #666;
  background: #ddd;
}

#inner1 {
  float: left;
  /* Styling for illustration purposes */
  border: solid 3px #c00;
  background: #fdd;
}

#inner2 {
  overflow: hidden;
  /* Styling for illustration purposes */
  border: solid 3px #00c;
  background: #ddf;
}

ブラウザの互換性とエッジケース:

このソリューションはテスト済みですIE 6、7、8 で正常に動作することを確認しました。 Firefox 3.5; IE 6 では、ズームを使用する追加の CSS ルール: 1; #inner2 div が残りのスペースを確実に埋めるために必要です。

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