Сколько существует способов реализовать классический двухколоночный макет слева и справа?

Привыкайте писать вместе! Это третий день моего участия в «Ежедневном новом плане Nuggets · Апрельское задание по обновлению», нажмите, чтобы просмотреть подробности мероприятия.

Так называемая левая и правая двухколоночная раскладка, то есть 左侧宽度固定，右侧宽度自适应, позвольте мне рассказать вам о реализации классической левой и правой двухколоночной раскладки, существуют следующие семь методов.

Структура 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на правом элементе установите свойство CSS margin-left, значение которого равно ширине левого элемента.

.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: также используйте float

Идея реализации: установите фиксированную ширину для левого элемента и установите свойства CSS, а также установите свойства CSS float: leftдля правого элемента.В overflow: autoэто время будет срабатывать правая сторона BFC, и BFC область не будет перекрываться с плавающим элементом, поэтому два стороны не будут пересекаться.

.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: Также используйте относительное/абсолютное позиционирование

Идея реализации: Задайте свойства CSS для родительского элемента position: relative, задайте фиксированную ширину для левого элемента, задайте свойства 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и задайте фиксированную ширину; задайте table-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;
}
复制代码

Визуализация этих семи методов показана ниже.

изображение.png

Изучив двухколоночный макет, а затем написав CSS для трехколоночного макета, большой проблемы не будет!