На собеседованиях нам часто задают простой вопрос: «Реализуйте трехколоночный макет, фиксированный слева и справа и адаптивный посередине». Эта проблема заключается в том, чтобы изучить точку знания макета страницы, мы находимся в фактическом развитии проекта, мы часто сталкиваемся с этой проблемой. На самом деле я обнаружил, что у front-end разработчика есть общая проблема, включая меня: «Я чувствую, что CSS не очень важен и не требует глубокого изучения», что на самом деле является относительно плохой идеей. В проектах часто возникают смещенные макеты, но причина этого неизвестна. Итак, сегодня мы кратко обобщим способы достижения трехколоночного макета.
1. Плавающий макет
<template>
<div class="box">
<div class="left">1</div>
<div class="right">3</div>
<div class="content">2</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
}
.content {
background: yellow;
}
.right {
float: right;
width: 100px;
background: blue;
}
</style>
Этот метод компоновки реализуется путем отплывания от потока документа. Здесь следует обратить особое внимание. Левый и правый элементы располагаются перед содержимым. Если средний элемент расположен в обычном порядке левый-контент-правый, то право будет размещено на вершине. Трехколоночный макет не может быть достигнут.
Функция плавающего элемента: вне потока документа, что позволяет обтекать его текстом и встроенными элементами. Элемент удаляется из обычного потока веб-страницы (поток документов), хотя часть потока все еще сохраняется. То есть, если в родительском блоке есть два дочерних элемента, и один из дочерних элементов является плавающим, если другой элемент является элементом уровня блока, плавающий элемент будет игнорироваться, Переопределяется плавающим элементом; оборачивает плавающий элемент, если другой элемент является встроенным.
Достоинства: хорошая совместимость.
Недостатки: элементы находятся вне потока документа и плавают.
Во-вторых, макет позиционирования
<template>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
position: relative;
}
.box > div {
min-height: 100px;
position: absolute;
}
.left {
left: 0px;
width: 100px;
background: red;
}
.content {
left: 100px;
right: 100px;
background: yellow;
}
.right {
right: 0px;
width: 100px;
background: blue;
}
</style>
Преимущества: Простой, подходит для быстрой разработки страницы.
Недостатки: Элемент отделен от потока документов, в результате чего последующие элементы также отделены от потока документов, а удобство использования относительно низкое.
Три, гибкий макет
<template>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: flex;
}
.box > div {
min-height: 100px;
}
.left {
width: 100px;
background: red;
}
.content {
flex: 1;
background: yellow;
}
.right {
width: 100px;
background: blue;
}
</style>
Достоинства: Разработка проста и удобна в использовании.
Недостаток: это очень распространено в мобильной разработке, но не совместимо с IE8 на ПК.
Четыре, раскладка стола
<template>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: table;
width: 100%;
min-height: 100px;
}
.box > div {
display: table-cell;
}
.left {
width: 100px;
background: red;
}
.content {
background: yellow;
}
.right {
width: 100px;
background: blue;
}
</style>
Достоинства: хорошая совместимость.
Недостатки: Когда-то все в моде, а сейчас в основном заброшены.
Пять, макет сетки
<template>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box {
display: grid;
grid-template-columns: 100px 1fr 100px;
}
.box > div {
min-height: 100px;
}
.left {
background: red;
}
.content {
background: yellow;
}
.right {
background: blue;
}
</style>
Плюсы: просто. Две строки ключевого кода, чтобы сделать это.
Недостаток: плохая совместимость.
6. Второй способ плавающей компоновки.
<template>
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
</template>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
position: relative;
z-index: 9999;
}
.content {
float: left;
width: 100%;
margin-left: -100px;
background: yellow;
padding: 0 100px;
/* z-index: 1; */
position: relative;
}
.right {
float: left;
width: 100px;
margin-left: -100px;
background: blue;
z-index: 1;
position: relative;
}
</style>