従来の左右の2列レイアウトを実装する方法はいくつありますか？

一緒に書く習慣を身につけましょう！「ナゲッツデイリーニュープラン・4月アップデートチャレンジ」に参加して3日目です。クリックしてイベントの詳細をご覧ください。

いわゆる左右2列レイアウト、つまり左侧宽度固定，右侧宽度自适应、古典的な左右2列レイアウトの実装についてお話ししましょう。次の7つの方法があります。

このページのDOM構造は次のとおりです。

<div class="container">
  <div class="left">我是侧边栏</div>
  <div class="right">我是内容区域</div>
</div>
复制代码

方法1：フレックスレイアウトを使用する（最も一般的）

実装のアイデア：左側の要素に固定幅を設定し、右側の要素にCSSプロパティを設定しますflex: 1。

.container {
  display: flex;
  width: 100%;
  height: 500px;
}
.left {
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  flex: 1;
  height: 100%;
  background-color: red;
}
复制代码

方法2：フロートを使用する

実装のアイデア：左側の要素に固定幅を設定し、CSSプロパティを設定float: leftし、右側の要素margin-leftにCSSプロパティを設定します。この値は、左側の要素の幅と同じです。

.container {
  width: 100%;
  height: 500px;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  margin-left: 240px;
  height: 100%;
  background-color: red;
}
复制代码

方法3：フロートも使用する

実装のアイデア：左側の要素に固定幅を設定し、CSSプロパティを設定float: leftし、右側の要素にCSSプロパティを設定しますoverflow: auto。このとき、右側がトリガーさBFCれBFC 、領域はフローティング要素と重ならないため、2つ側面は重なりません。

.container {
  width: 100%;
  height: 100vh;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  overflow: auto;
  background-color: red;
}
复制代码

方法4：相対/絶対測位を使用する

実装のアイデア：親要素position: relativeを設定し、左側の要素の固定幅を設定し、CSSプロパティposition: absoluteを設定し、右側の要素のCSSプロパティを設定するmargin-leftと、その値は左側の要素の幅と等しくなります。

.container {
  height: 500px;
  position: relative;
}
.left {
  width: 240px;
  height: 100%;
  position: absolute;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  margin-left: 240px;
  background-color: red;
}
复制代码

知らせ：

Absoluteはドキュメントのフローから要素を作成し、rightはコンテンツを直接上にプッシュするため、margin-leftを左の要素の幅に等しく設定する必要があります。
divの幅はデフォルトで100％ですが、absoluteが設定されている場合、幅は100％ではなく、コンテンツの幅によって決定されます。

解決：

幅を直接設定できます：100％。
左：0、右：0に設定することもできます。

方法5：相対/絶対測位も使用する

実装のアイデア：親要素position: relativeにCSSプロパティを設定し、左側の要素に固定幅を設定し、右側の要素にCSSプロパティをposition: absolute設定し、left、right、top、bottom属性left。値は左側の要素の幅と同じです。

.container {
  height: 500px;
  position: relative;
}
.left {
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  height: 100%;
  position: absolute;
  left: 240px;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: red;
}
复制代码

方法6：テーブルレイアウトテーブルを使用する

実装のアイデア：親要素にCSSプロパティをdisplay: table設定し、幅を100％に設定します。左側の要素にCSSプロパティをdisplay: table-cell設定し、固定幅を設定します。右側の要素にCSStable-cellプロパティ。

.container {
  display: table;
  width: 100%;
  height: 500px;
}
.left {
  display: table-cell;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  display: table-cell;
  height: 100%;
  background-color: red;
}
复制代码

方法7：計算関数を使用する

実装のアイデア：左側の要素にCSSプロパティをfloat: left設定し、固定幅を設定します。右側の要素にCSSプロパティfloat: leftを設定し、幅を設定します。widthその値はに等しくなりcalc(100% - 左侧元素的宽度)ます。

.container {
  width: 100%;
  height: 500px;
}
.left {
  float: left;
  width: 240px;
  height: 100%;
  background-color: lightskyblue;
}
.right {
  float: left;
  width: calc(100% - 240px);
  height: 100%;
  background-color: red;
}
复制代码

これらの7つのメソッドのレンダリングを以下に示します。

2列のレイアウトを学習し、3列のレイアウトのCSSを記述した後は、大きな問題はありません。