「労働者が自分の仕事をうまくやりたいなら、まず自分の道具を研ぎ澄まさなければなりません。」 - 孔子、「論語。陸霊公」
表紙 > プログラミング > 固定された幅の右列と流動的な左列を使用して2列のレイアウトを作成するにはどうすればよいですか?

固定された幅の右列と流動的な左列を使用して2列のレイアウトを作成するにはどうすればよいですか?

2025-02-06に投稿しました
ブラウズ:609

How to Create a Two-Column Layout with a Fixed-Width Right Column and a Fluid Left Column?

2-Column divレイアウト:固定幅の右列と流動的な左列を達成します

チャレンジ:

コードが提供された2列のレイアウト:

[フロートとマージンを使用してレイアウトを実装しますが、問題に遭遇します。ガイドライン:

左列のフロートを削除:左列からフロートプロパティを削除(#content)。 &&&]右列(#right)をHTMLコードの左列の前に配置します。これにより、右の列の幅が最初に適用されます。容器)。これにより、内側のdivが容器のオーバーフローを防ぎます。これにより、列が残りのスペースを埋めることができ、右の列との相互作用を防ぎます。 &&&]

固定幅の正しいコンテンツ
柔軟な幅でコンテンツを残しました

css:
  1. 。 高さ:自動; オーバーフロー:隠し; } 。右 { 幅:180px; フロート:そうです; 背景:#aafed6; } 。左 { フロート:なし; 背景:#e8f6fe; 幅:auto; オーバーフロー:隠し; }
  2. demo:
  3. [this jsfiddle](https://jsfiddle.net/jackjoe/fxwg7/)を訪問します。
最新のチュートリアル もっと>

免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。

Copyright© 2022 湘ICP备2022001581号-3