三栏布局技巧
2020 css三栏布局:两边定宽,中间自适应
PS:所有例子左右侧宽度均为 200px
BFC
左右设置 float,中间设置 overflow 属性触发 BFC
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
.left {
float: left;
}
.right {
float: right;
}
.main {
overflow: auto;
}
缺点就是主要内容无法最先加载,当页面内容较多时会影响用户体验
双飞翼布局
中间左浮动并设置宽度 100%,main 显示内容并设置左右 margin,左侧左浮动,右侧右浮动,两侧均 margin-left 移动负 100%。
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
.content {
float: left;
width: 100%;
}
.main {
margin-left: 220px;
margin-right: 220px;
}
.left {
float: left;
margin-left: -100%;
}
.right {
float: right;
margin-left: -100%;
}
双飞翼布局则是源于淘宝的 UED
圣杯布局
三栏设置浮动,让其在同一行显示。左右设置 position: relative
,再设置 left, right 各 -220px。整体设置左右 padding/margin 220px
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
padding-left: 220px;
padding-right: 220px;
}
.main {
float: left;
width: 100%;
}
.left {
float: left;
margin-left: -100%;
position: relative;
left: -220px;
}
.right {
float: right;
margin-left: -100%;
position: relative;
right: -220px;
}
圣杯布局来源于 In Search of the Holy Grail
Flex 布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
display: flex;
}
.main {
flex-grow: 1;
}
.left {
order: -1;
}
绝对定位布局
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
.container {
position: relative;
}
.main {
margin: 0 220px;
}
.left {
position: absolute;
top: 0;
left: 0;
}
.right {
position: absolute;
top: 0;
right: 0;
}