Отзывчивый макет с тремя колонками (макет Holy Grail)

CSS

представлять

  • Проще говоря, страница разделена на три части: левую, среднюю и правую, причем левая и правая части имеют фиксированную ширину, а средняя часть является адаптивной.

выполнить

  • Предположим, что высота каждого столбца составляет 150 пикселей, ширина левого столбца — 200 пикселей, ширина правого столбца — 150 пикселей, а средняя часть является адаптивной.

Метод 1: плавающий левый и справа + 100% ширина в середине

HTML-структура

  • Для переноса 3 столбцов требуется родительский элемент, вот контейнер
<style type="text/css">
  /* 设置左右内边距*/
  .container {
     padding-left: 200px;  /*左列宽度*/
     padding-right: 150px; /*右列宽度*/
  }
</style>
<div class="container"></div>

img01

Добавьте три столбца в контейнер

  • Установите для всех трех столбцов значение float:left, чтобы отобразить их в одной строке.
  • Поскольку ширина центра равна 100%, родительский элемент заполнен, поэтому левый и правый элементы могут отображаться только в новой строке.
<style type="text/css">
  .container div {
     height: 150px;
     color: white;
     line-height: 150px;
     float: left;
  }
  .center {
     width: 100%;
     background-color: #50bf3c;
  }
  .left {
     width: 200px;
     background-color: #ff5722;
  }
  .right {
     width: 150px;
     background-color: #2196f3;
  }
</style>
<div class="container">
    <div class="center">中间自定义</div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
</div>

img02

Переместите левый вверх к центральному одноранговому дисплею

  • Установить левое поле:-100%; левое смещается вверх к центральной линии и перекрывается с центром
.left {
   margin-left: -100%;
}

img03

  • Установите относительное положение и переместите влево влево от родительского элемента
.left {
   position: relative;
   right: 200px; /*自身宽度*/
}

img04

Переместите вправо вверх к центральному одноранговому дисплею

  • Установите margin-right:-150px; переместите вправо вверх к центральной линии, чтобы завершить макет Святого Грааля. В это время при изменении размера окна средняя область будет изменяться адаптивно.
.right {
   margin-right: -150px;
}

img05

ключевой момент

  • центр размещается перед потоком документов для приоритетного рендеринга
  • Используйте отрицательные поля
  • left использует относительное позиционирование

Способ 2: абсолютное позиционирование + отсутствие ширины посередине

полный код

<style type="text/css">
   .container {
      position: relative;
      text-align: center;
   }
   .container div {
      height: 150px;
      color: white;
      line-height: 150px;
   }
   .center {
      background-color: #50bf3c;
      margin-left: 200px;
      margin-right: 150px;
   }
   .left {
      width: 200px;
      background-color: #ff5722;
      position: absolute;
      top: 0px;
      left: 0px;
   }
   .right {
      width: 150px;
      background-color: #2196f3;
      position: absolute;
      top: 0px;
      right: 0px;
   }
</style>
<div class="container">
    <div class="center">中间自适应</div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
</div>

ключевой момент

  • Используйте абсолютное позиционирование слева и справа и установите значение поля посередине.

Способ 3: сгибание

HTML-структура
<div class="container">
    <div class="center">中间自适应</div>
    <div class="left">左侧定宽</div>
    <div class="right">右侧定宽</div>
</div>

Установите для контейнера гибкую компоновку, display:flex;

  • Контейнер становится flex-контейнером, а дочерние элементы center, left и right автоматически становятся flex-элементами.
.container {
  display:flex;
}

img06

Отрегулируйте положение элемента

  • Отрегулируйте положение, установив свойство порядка элемента
  • Значение заказа по умолчанию равно 0, чем меньше значение, тем выше товар.
.left {
  order: -1;
}

img07

Левая и правая стороны фиксированной ширины

  • Установите свойство flex-basis элемента на фиксированную ширину
.left {
  flex-basis: 200px;
}
.right {
  flex-basis: 150px;
}

img08

автоматически заполнить оставшийся космический центр

  • Установите для свойства flex-grow элемента значение 1, значение по умолчанию — 0.
.center {
  flex-grow:1;
}

img09

ключевой момент

  • Родительский элемент установлен на flexbox
  • Используйте flex-basis, чтобы установить размер самого элемента слева и справа
  • Используйте настройки flex-grow посередине, чтобы заполнить оставшееся пространство.
Категории