動的コンテンツでネストされた Div の幅を制御するにはどうすればよいですか?

動的幅制御を使用したネストされた Div

Web 開発では、コンテンツの div 要素の幅を正確に計算することが困難な場合があります。は予測不可能です。この問題は、ある div の幅を別の div に対して動的に調整しようとすると発生します。

問題の説明

次の HTML 構造を考慮してください:

<div>
<p>目標は、#inner1 div の幅を考慮した後、残りの水平方向のスペースを #inner2 div が占めるようにすることです。幅はその内容によって動的に決定されます。</p>
<p><strong>解決策</strong></p>
<p>この問題を解決する鍵は、overflow: hidden; を利用することです。 CSS プロパティ。このプロパティは、フロートに隣接する要素がフロートの背後に広がるのを防ぎます。この場合、このプロパティを使用して #inner2 div の幅を制御できます。</p>
<p><strong>更新された CSS</strong>:</p>
<pre class="brush:php;toolbar:false">#outer {
    overflow: hidden;
    width: 100%;
}

#inner1 {
    float: left;
}

#inner2 {
    overflow: hidden;
}

overflow: hidden; を設定することで、#inner2 div の幅を制御できます。 #outer div では、#inner2 div が親の境界を超えないようにすることができます。 #inner2 div は、残りの水平方向のスペースを自動的に占有します。

追加メモ

IE 6 との互換性に対処するために、HTML 条件付きコメントを使用する追加の CSS ルールを使用できます。追加:

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;
}

#inner1 {
    margin-right: -3px;
}
</style>
<![endif]-->

結論

オーバーフローを利用することで: hidden;プロパティを使用すると、ネストされた div の幅を動的に調整して、ある div が別の div の幅を考慮した後で残りの水平方向のスペースを占めるようにすることができます。このテクニックは、div 幅の正確な制御が必要なさまざまな Web レイアウトで役立ちます。