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

2 列 Div レイアウト: 固定幅の右列と流動的な左列の実現

課題:

の作成2 列レイアウト。右の列は固定幅で、左の列は使用可能な幅に動的に調整されます。 space.

提供されたコード:

提供されたコードは、float と margin を使用してレイアウトを実装しようとしますが、問題が発生します。

解決策:

左列の流動性を維持しながら固定幅の右列を確立するには、次の手順に従います。ガイドライン:

1. 左列のフロートを削除: 左列 (#content) から float プロパティを削除します。
2. HTML 列の並べ替え: HTML コードの左列の前に右列 (#right) を配置します。これにより、正しい列の幅が最初に適用されるようになります。
3. 外側の Div にオーバーフローを適用: 外側の Div (div.容器）。これにより、内部 div がコンテナからオーバーフローするのを防ぎます。
4. 左列の幅とオーバーフローを設定: 左列の幅を自動に設定し、オーバーフロー: 非表示を追加します。これにより、列が残りのスペースを埋めることができ、右側の列との相互作用が防止されます。

例コード:

HTML:

<div class="container">
  <div class="right">
    Right content with fixed width
  </div>
  <div class="left">
    Left content with flexible width
  </div>
</div>

CSS:

.container {
  height: auto;
  overflow: hidden;
}

.right {
  width: 180px;
  float: right;
  background: #aafed6;
}

.left {
  float: none;
  background: #e8f6fe;
  width: auto;
  overflow: hidden;
}

デモ:

[これにアクセスしてください] JsFiddle](https://jsfiddle.net/jackJoe/fxWg7/) の動作デモ。

以上が固定幅の右列と流動的な左列を含む 2 列レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。