Web ページレイアウトの残りのスペースを動的に埋める Div を作成するにはどうすればよいですか?

曲げ平衡の維持: 残りの幅の割り当てを分割する

Web 開発の領域では、最適なページ レイアウトを実現するには、要素をシームレスに配置する必要がよくあります。このような課題の 1 つは、コンテナー内の残りのスペースを div で動的に埋めようとするときに発生します。このタスクに効果的に取り組むために、次の例を検討してください。

<div>
<p>このレイアウト内で、私たちの目的は、利用可能な残りの幅を占めるように div2 を適応させることです。これを実現するには、次のコードを利用します。</p>
<pre class="brush:php;toolbar:false"><style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div><p>子 div に適切な幅、浮動小数点、およびマージンの値を割り当てることにより、div2 は残りのスペースをシームレスに占有するように動的に適応します。適切にレンダリングするには、HTML マークアップの「中間 div」を「右 div」の後に配置する必要があることに注意してください。</p></div>