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

右列が固定幅の 2 列レイアウトの作成

Web サイトのレイアウトを設計する場合、2 列が必要になるのが一般的です。 1 つは固定幅で、もう 1 つは可変幅です。これは、CSS プロパティと HTML 構造の組み合わせによって実現できます。

まず、左側の列から float プロパティを削除することが重要です。位置を固定するために浮動小数点と定義された幅が必要な右側の列とは異なり、左側の列は幅が柔軟なままである必要があります。

さらに、HTML コードでは、右側の列は次のようにする必要があります。

overflow: hidden プロパティと高さの値 (自動または特定の測定) をコンテナ div に適用すると、周囲のスペースが両方を囲みます。 inner divs.

最後に、左側の列が固定幅の右側の列から独立していることを確認するには、width: auto プロパティと overflow: hidden プロパティを追加する必要があります。この組み合わせにより、右側の列を妨げずに左側の列を展開できます。

このレイアウトを示すために、次の HTML と CSS を考慮してください。コード:

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; /* not needed, just for clarification */
  background: #e8f6fe;
  /* the next props are meant to keep this block independent from the
  other floated one */
  width: auto;
  overflow: hidden;
}

このレイアウトは、右手を効果的に配置します。右側の列は固定幅ですが、左側の列は柔軟なままで、使用可能な幅に合わせて調整されます。スペース。

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