Web デザインにおける一般的な課題は、2 つの div に対応することです。1 つは特定の固定幅を持ち、もう 1 つは動的に変更する必要があります。残りのスペースを占有します。
CSS を利用する効果的なアプローチの 1 つ:
.left {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 83%;}
.right {
width: 16%;
}
この CSS 構成により、 .left div は使用可能な幅の 83% を占め、.right div は残りの 16% を占め、.left div の必要な固定幅が維持されます。
代わりに、display: table プロパティは強力な解決策を提供します。
<div class="right"> </div><br><div class="left"></div>
.left {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;}
.right {
display: table-cell; width: 16%;
}
display プロパティを親コンテナの table に、div の table-cell に設定すると、ブラウザは効果的に 2 列のテーブルを作成します。固定幅の div が 1 つのセルに表示され、残りのスペースがもう 1 つのセルを動的に埋めます。
CSS と display: table メソッドはどちらも、固定幅の div を収容しながら残りのスペースを他の div が占有できるようにするという問題に対する効果的な解決策を提供します。最適なアプローチは、特定の要件とブラウザーの互換性に関する考慮事項によって異なります。
以上がWeb デザインで固定幅の Div と残りのスペース Div に対応するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
