右列が固定幅の 2 列レイアウトを作成するにはどうすればよいですか?

右列が固定幅の 2 列レイアウトを作成する方法

Web デザインでは、多くの場合、レイアウトを作成する必要があります。 2 つの列があり、1 つは固定幅で、もう 1 つは可変幅です。一般的な要件であるにもかかわらず、一貫して機能するソリューションを見つけるのは難しい場合があります。

この特定のケースでは、目標は、右側の列が一定の幅を維持し、左側の列が幅に応じて拡大または縮小する 2 つの列を作成することです。利用可能なスペースに。段階的な答えは次のとおりです:

1. 左の列からフロートを削除します: 左の列のフロート プロパティを削除すると、自然にフローできるようになります。
2. 右の列を左の列の前に移動: HTML では、右の列が左の列の前に来る必要があります。 one.
3. 右列の幅と浮動小数点を設定します: 右列の固定幅を定義し、それに浮動小数点数を適用します (例: float: right)。
4. 外側の Div にオーバーフローと高さを追加します: オーバーフロー: 非表示と高さ (自動にすることもできます) を両方を含む外側の Div に適用します。内側の列。
5. 左列に自動幅とオーバーフローを追加: 左列の幅を自動に設定し、オーバーフローを適用します: 非表示。これにより、正しい列からの独立性が確保されます。

HTML の例:

<div class="container">
  <div class="right">
    Right Content (Fixed Width)
  </div>
  <div class="left">
    Left Content (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;
}

このソリューションは、左側の列を許可しながら、右側の列を固定幅にした目的の 2 列レイアウトを作成します。ブラウザウィンドウのサイズに基づいて動的に調整する列。

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