Резюме этой статьи
В этой статье будут представлены следующие общие макеты:
Существует множество способов реализации трехколоночного макета.Эта статья посвящена макету Holy Grail и двухкрыловому макету. Другие могут быть пробитыНесколько способов добиться трехколоночного макета
Одноколоночный макет
Существует два распространенных одноколоночных макета:
- Одноколоночный макет с одинаковой шириной заголовка, содержимого и нижнего колонтитула.
- Одноколоночный макет с той же шириной, что и верхний и нижний колонтитулы, и немного более узким содержимым.
1. Как реализовать
Для первого типа сначала установите ширину: 1000 пикселей для заголовка, контента и нижнего колонтитула одинаково; или максимальную ширину: 1000 пикселей (разница между ними заключается в том, что, когда экран меньше 1000 пикселей, первый будет иметь полосы прокрутки, последний будет нет, отображать фактическую ширину); затем установите margin:auto для достижения центрирования.
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.content{
margin: 0 auto;
max-width: 960px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
Для второго типа ширина содержимого верхнего и нижнего колонтитула не задана, а элемент блочного уровня заполняет весь экран, но область содержимого верхнего и нижнего колонтитула устанавливается одинаковой ширины и по центру поля:авто.
<div class="header">
<div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>
.header{
margin:0 auto;
max-width: 960px;
height:100px;
background-color: blue;
}
.nav{
margin: 0 auto;
max-width: 800px;
background-color: darkgray;
height: 50px;
}
.content{
margin: 0 auto;
max-width: 800px;
height: 400px;
background-color: aquamarine;
}
.footer{
margin: 0 auto;
max-width: 960px;
height: 100px;
background-color: aqua;
}
Двухколоночная адаптивная верстка
Адаптивный макет с двумя столбцами относится к макету, в котором один столбец растягивается содержимым, а другой столбец заполняет оставшуюся ширину.
1.float+overflow:hidden
Если это обычный двухколоночный макет,Float + поле нормального элементаЭтого можно добиться, но если это адаптивный двухколоночный макет, используйтеfloat+overflow:hiddenЭто может быть достигнуто Этот метод в основном запускает BFC через переполнение, и BFC не перекрывает плавающие элементы. Поскольку установка overflow:hidden не активирует свойство haslayout браузера IE6, вам необходимо установить zoom:1 для совместимости с браузером IE6. Конкретный код выглядит следующим образом:
<div class="parent" style="background-color: lightgrey;">
<div class="left" style="background-color: lightblue;">
<p>left</p>
</div>
<div class="right" style="background-color: lightgreen;">
<p>right</p>
<p>right</p>
</div>
</div>
.parent {
overflow: hidden;
zoom: 1;
}
.left {
float: left;
margin-right: 20px;
}
.right {
overflow: hidden;
zoom: 1;
}
Примечание. Если боковая панель находится справа, обратите внимание на порядок рендеринга. То есть в HTML сначала напишите боковую панель, а затем основной контент.
2. Гибкая компоновка
Гибкая компоновка, также известная как гибкая блочная компоновка, может реализовать макет различных страниц с помощью всего нескольких строк кода.
//html部分同上
.parent {
display:flex;
}
.right {
margin-left:20px;
flex:1;
}
3. Макет сетки
Макет сетки — это двухмерная система макета на основе сетки, предназначенная для оптимизации дизайна пользовательского интерфейса.
//html部分同上
.parent {
display:grid;
grid-template-columns:auto 1fr;
grid-gap:20px
}
Три, три столбца
Особенности: адаптивная ширина средней колонки, фиксированная ширина с обеих сторон
1. Макет Святого Грааля
① Особенности
Специальная трехколоночная компоновка также имеет фиксированную ширину с обеих сторон и адаптивную посередине.Единственное отличие состоит в том, что структура DOM должна быть сначала записана в средней колонке, чтобы среднюю колонку можно было загрузить первой..
.container {
padding-left: 220px;//为左右栏腾出空间
padding-right: 220px;
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
position: relative;
left: -220px;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
position: relative;
right: -220px;
}
<article class="container">
<div class="center">
<h2>圣杯布局</h2>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② Этапы реализации
- Все три части настроены на плавание влево,В противном случае, если содержимое левой и правой сторон не может подняться вверх, невозможно оказаться в той же строке, что и средний столбец.. Затем установите ширину центра на 100% (Реализовать адаптацию содержимого среднего столбца), в это время левая и правая части перейдут на следующую строку
- Сделайте так, чтобы левая и правая части возвращались к той же линии, что и центральная часть, установив для поля слева отрицательное значение.
- Установив padding-left и padding-right родительского контейнера, оставьте зазор слева и справа.
- Установив относительное позиционирование, позвольте левой и правой частям двигаться в стороны.
③ Недостатки
- Минимальная ширина центральной части не может быть меньше ширины левой части, иначе левая часть упадет на следующую строку
- Если содержимое одной из колонок вытянуто по высоте (как показано на рисунке ниже), фон двух других колонок не будет заполняться автоматически. (Это можно решить с помощью положительного отступа + отрицательного поля макета равной высоты, который будет представлен ниже)
2. Двухстворчатая компоновка
① Особенности
Это также макет с тремя колонками, который дополнительно оптимизирован на основе макета Святого Грааля, что решает проблему путаницы в макете Святого Грааля и реализует разделение контента и макета. И любой столбец может быть самым высоким столбцом без проблем.
.container {
min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
}
.left {
float: left;
width: 200px;
height: 400px;
background: red;
margin-left: -100%;
}
.center {
float: left;
width: 100%;
height: 500px;
background: yellow;
}
.center .inner {
margin: 0 200px; //新增部分
}
.right {
float: left;
width: 200px;
height: 400px;
background: blue;
margin-left: -200px;
}
<article class="container">
<div class="center">
<div class="inner">双飞翼布局</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
② Шаги реализации (первые два шага аналогичны макету Holy Grail)
- Обе из трех частей установлены на левое плавание, затем установите центр центра на 100%, в это время левая и правая части перейдут на следующую строку;
- Пусть левая и правая части вернутся к той же линии, что и центральная часть, установив для поля margin-left отрицательное значение;
- Добавьте внутренний div в центральную часть и установите margin: 0 200px;
③ Недостатки
Добавьте дополнительный слой узлов дерева dom, чтобы увеличить количество вычислений для генерации дерева рендеринга..
3. Сравнение двух реализаций макета:
- В обоих макетах основной столбец размещается в начале потока документов, поэтому основной столбец загружается первым.
- Два метода макета также имеют одинаковую реализацию: оба размещают три столбца с плавающей запятой, а затем формируют макет из трех столбцов с отрицательными полями.
- Разница между двумя макетами заключается в том, как обрабатывается положение среднего основного столбца:Макет Святого Грааля заключается в использовании левого и правого заполнения родительского контейнера + два относительных позиционирования из столбца.;Макет с двойным крылом заключается в том, чтобы вложить основной столбец в новый родительский блок и использовать левое и правое поля основного столбца для настройки макета.
4. Одинаковая высота
Макет равной высоты относится к макету дочерних элементов в родительском элементе с одинаковой высотой. Далее мы вводим несколько общих методов реализации:
1. Используйте положительное заполнение + отрицательное поле
Мы можем решить второй недостаток макета Holy Grail, дождавшись макета, потому что фон отображается в области заполнения,Установите большое значение padding-bottom, установите отрицательное значение margin-bottom того же значения, добавьте контейнер за пределами всех столбцов и установите overflow:hidden, чтобы обрезать фон переполнения.. Можно добиться многоколоночной равновеликой верстки, а также добиться эффекта разделительных линий между колонками.Структура проста и совместима со всеми браузерами. Добавленный код выглядит следующим образом:
.center,
.left,
.right {
padding-bottom: 10000px;
margin-bottom: -10000px;
}
.container {
padding-left: 220px;
padding-right: 220px;
overflow: hidden;//把溢出背景切掉
}
2. Используйте фоновые изображения
Этот метод является одним из самых ранних методов, которые мы используем для достижения столбцов одинаковой высоты, который заключается в использовании фонового изображения и использовании этого фонового изображения в родительском элементе столбца для наложения оси Y, чтобы создать иллюзию. столбцов одинаковой высоты. Метод реализации прост, совместимость надежна, и его можно легко реализовать без слишком большого количества стилей CSS, но этот метод не подходит для макетов с большим количеством столбцов, таких как гибкие макеты.
Перед созданием стиля вам понадобится фоновое изображение, подобное следующему:
<div class=”container clearfix”>
<div class=”left”></div>
<div class=”content”></div>
<div class=”right”></div>
</div>
.container {
background: url("column.png") repeat-y;
width: 960px;
margin: 0 auto;
}
.left {
float: left;
width: 220px;
}
.content {
float: left;
width: 480px;
}
.right {
float: left;
width: 220px;
}
3. Имитируйте раскладку стола
Это очень простой и легко реализуемый метод. Однако совместимость не очень хорошая, и в ie6-7 он не работает должным образом.
<div class="container table">
<div class="containerInner tableRow">
<div class="column tableCell cell1">
<div class="left aside">
....
</div>
</div>
<div class="column tableCell cell2">
<div class="content section">
...
</div>
</div>
<div class="column tableCell cell3">
<div class="right aside">
...
</div>
</div>
</div>
</div>
.table {
width: auto;
min-width: 1000px;
margin: 0 auto;
padding: 0;
display: table;
}
.tableRow {
display: table-row;
}
.tableCell {
display: table-cell;
width: 33%;
}
.cell1 {
background: #f00;
height: 800px;
}
.cell2 {
background: #0f0;
}
.cell3 {
background: #00f;
}
4. Используйте границы и позиционирование
Этот подход использует границы и абсолютное позиционирование для достижения эффекта поддельного столбца одинаковой высоты. Простая структура, совместимая с различными браузерами, простая в освоении. Предположим, вам нужно реализовать макет с двумя столбцами одинаковой высоты, с высотой боковой панели, равной высоте основного содержимого.
#wrapper {
width: 960px;
margin: 0 auto;
}
#mainContent {
border-right: 220px solid #dfdfdf;
position: absolute;
width: 740px;
height: 800px;
background: green;
}
#sidebar {
background: #dfdfdf;
margin-left: 740px;
position: absolute;
height: 800px;
width: 220px;
}
<div id="wrapper">
<div id="mainContent">...</div>
<div id="sidebar">...</div>
</div>
5. Схема склеивания
1. Особенности
- есть часть контента
<main>,когда<main>когда gaokang достаточно долго, чтобы следовать<main>элементы позади<footer>последует<main>за элементом. - когда
<main>Когда элемент относительно короткий (например, меньше высоты экрана), мы ожидаем, что это<footer>Элементы могут «прилипать» к нижней части экрана
Конкретный код выглядит следующим образом:
<div id="wrap">
<div class="main">
main <br />
main <br />
main <br />
</div>
</div>
<div id="footer">footer</div>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;//高度一层层继承下来
}
#wrap {
min-height: 100%;
background: pink;
text-align: center;
overflow: hidden;
}
#wrap .main {
padding-bottom: 50px;
}
#footer {
height: 50px;
line-height: 50px;
background: deeppink;
text-align: center;
margin-top: -50px;
}
2. Этапы реализации
(1) Нижний колонтитул должен быть независимой структурой без каких-либо вложенных отношений с обтеканием.
(2) Высота области обтекания становится высотой области просмотра путем установки минимальной высоты
(3) Нижний колонтитул должен использовать отрицательное поле, чтобы определить его позицию
(4) Нижний отступ должен быть установлен в основной области. Это также сделано для того, чтобы отрицательные поля не заставляли нижний колонтитул закрывать какой-либо фактический контент.
Отредактировано в 2019.1.2, если вы считаете, что статья немного полезна для вас, добро пожаловать вмой блог на гитхабеСтавьте лайк и подписывайтесь, большое спасибо!