Web デザインで固定幅の Div と残りのスペース Div に対応するにはどうすればよいですか?

固定幅 div と残りの div の対応

Web デザインにおける一般的な課題は、2 つの div に対応することです。1 つは特定の固定幅を持ち、もう 1 つは動的に変更する必要があります。残りのスペースを占有します。

CSS ベースのソリューション

CSS を利用する効果的なアプローチの 1 つ:

.left {</p>
<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>
<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 サイトの他の関連記事を参照してください。