HTML/CSS で安定した 2 列レイアウトを作成するには?-CSSチュートリアル-php.cn

HTML/CSS で安定した 2 列レイアウトを作成するには?

Linda Hamilton

リリース： 2024-11-20 18:41:17

オリジナル

501 人が閲覧しました

How to Create a Stable Two-Column Layout in HTML/CSS?

HTML/CSS で安定した 2 列のレイアウトを作成する

Web ページをデザインするときは、多くの場合、安定した 2 列のレイアウトを作成する必要があります。レイアウト。ただし、このレイアウトを実現するのは、特にサイズを変更したり境界線を適用したりする場合に困難になる場合があります。この記事では、次の要件に対処する HTML/CSS で安定した 2 列レイアウトを作成するアプローチについて説明します:

コンテナ制約:
- 幅は親の 100% に調整する必要があります要素。
- 高さは両方の列が含まれるように調整されます。
- 最小サイズは左の列幅の 2 倍に等しくなります。
列の制約(一般):
- 変数高さをコンテンツに合わせて調整します。
- 上端を揃えて並べて配置します。
- いずれかの列に適用される境界線、パディング、またはマージンの影響を受けません。
左列制約:
- ピクセル単位の固定絶対幅。
右列の制約:
- の残りのスペースを埋めます。コンテナ。
- 幅は、コンテナの幅から左の列の幅を引いたものと同じです。
必要な安定性:
- レイアウトなしで最小幅またはそれ以上の幅にサイズ変更可能

解決策:

安定した 2 列レイアウトを実現するには、float プロパティを利用できます。方法は次のとおりです:

左の列を左フロートに設定します:
```
left {
  width: 200px;
  float: left;
}
```
ログイン後にコピー
右にオフセットします列:
```
#right {
  margin-left: 200px;
}
```
ログイン後にコピー
div を使用して列の後のフロートをクリアします:
```
<div class="clear"></div>
```
ログイン後にコピー

このソリューションにより、両方のカラムが互いに干渉することなく共存できます。左側の列は固定幅を維持し、右側の列は残りのスペースを埋めます。列に適用される境界線やパディングは、列の位置には影響しません。

実際の例:

<!DOCTYPE html>
<html>
<head>
  <title>Cols</title>
  <style>
    #left {
      width: 200px;
      float: left;
    }
    #right {
      margin-left: 200px;
    }
    .clear {
      clear: both;
    }
  </style>
</head>

<body>
  <div>

ログイン後にコピー

以上がHTML/CSS で安定した 2 列レイアウトを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。