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

2 列 Div レイアウト:固定幅の右列、左流体

質問:

あなたは、固定幅の右側の列と、右側の列を含む 2 列のレイアウトを作成するソリューションを探しています。フレキシブルな左列。さまざまな提案されたアプローチを検討しましたが、具体的なニーズを満たすものはありませんでした。

答え:

希望のレイアウトを実現するには、次の変更が必要です:

1. 左の列から Float を削除: 左の列から float プロパティを削除します。幅は自動的に決定されます。
2. HTML で列の順序を逆にする: HTML コードでは、右の列が左の列よりも前にあることを確認してください。これにより、流動的な左列が調整される前に、固定幅の右列の幅を確立できます。
3. 外側の Div にオーバーフローと高さを追加する: オーバーフロー: 非表示のプロパティと特定の高さを適用する、または外側の div までの自動高さ。これにより、両方の内部 div が確実にカプセル化されます。
4. 左列 CSS の構成: 左列に、width: auto と overflow: hidden を追加します。これらのプロパティは、左側の列を固定幅の右側の列から独立させます。

HTML と CSS の例:

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

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

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

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

これらを実装することにより、調整を行うと、固定幅の右列と流動的な左列を備えた希望の 2 列レイアウトを作成できます。

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