前言
自适应三栏布局是常见的布局之一，一般实现为两边定宽而中间自适应
正文
1、通过 Float 实现
<div class="wrap">
<div class="left">
<p>Hello World</p>
</div>
<div class="right">
<p>Thank You</p>
</div>
<!-- center 必须写在最后 -->
<div class="center">
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
</div>
</div>.wrap {
/* BFC */
overflow: hidden;
zoom: 1; /* compatible with IE6 */
}
.left {
background-color: lightskyblue;
/* float + margin*/
float: left;
margin-right: 20px;
}
.right {
background-color: deepskyblue;
/* float + margin*/
float: right;
margin-left: 20px;
}
.center {
background-color: skyblue;
/* BFC */
overflow: hidden;
zoom: 1; /* compatible with IE6 */
}
2、通过 Flex 实现
<div class="wrap">
<div class="left">
<p>Hello World</p>
</div>
<div class="center">
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
</div>
<div class="right">
<p>Thank You</p>
</div>
</div>
.wrap {
/* flex container */
display: flex;
}
.left {
background-color: lightskyblue;
/* flex item */
flex-grow: 0;
/* margin */
margin-right: 20px;
}
.center {
background-color: skyblue;
/* flex item */
flex-grow: 1;
}
.right {
background-color: deepskyblue;
/* flex item */
flex-grow: 0;
/* margin */
margin-left: 20px;
}
3、通过 Grid 实现
<div class="wrap">
<div class="left">
<p>Hello World</p>
</div>
<div class="center">
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
</div>
<div class="right">
<p>Thank You</p>
</div>
</div>
.wrap {
/* grid container */
display: grid;
grid-template-columns: auto 1fr auto;
grid-column-gap: 20px;
}
.left {
background-color: lightskyblue;
}
.center {
background-color: skyblue;
}
.right {
background-color: deepskyblue;
}
4、圣杯布局和双飞翼布局
圣杯布局和双飞翼布局都是典型的自适应三栏布局，而且它们要求中间栏必须放在 DOM 结构的最前面优先渲染
（1）圣杯布局
<div class="wrapper">
<!-- center 必须写在最前 -->
<div class="center">
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
</div>
<div class="left">
<p>Hello World</p>
</div>
<div class="right">
<p>Thank You</p>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.wrapper {
/* 4、给容器设置内边距，为左右两栏预留位置 */
padding-left: 220px;
padding-right: 220px;
}
.center {
background-color: skyblue;
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 2、中间栏设置宽度自适应，此时左右两栏被挤到下一行 */
width: 100%;
}
.left {
width: 200px;
background-color: lightskyblue;
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 3、左右两栏设置负外边距，使它们回到同一行 */
margin-left: -100%;
/* 5、左右两栏设置相对定位，使其移到左右两边 */
position: relative;
left: -220px;
}
.right {
width: 200px;
background-color: deepskyblue;
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 3、左右两栏设置负外边距，使它们回到同一行 */
margin-left: -200px;
/* 5、左右两栏设置相对定位，使其移到左右两边 */
position: relative;
right: -220px;
}
（2）双飞翼布局
<div class="wrapper">
<!-- center 必须写在最前 -->
<!-- center 多包一层 wrapper-->
<div class="center-wrapper">
<div class="center">
<p>Say Hello To Tomorrow</p>
<p>Say Goodbye To Yesterday</p>
</div>
</div>
<div class="left">
<p>Hello World</p>
</div>
<div class="right">
<p>Thank You</p>
</div>
</div>
* {
margin: 0;
padding: 0;
}
.center {
background-color: skyblue;
/* 4、给中间栏本身设置外边距，为左右两栏预留位置 */
margin-left: 220px;
margin-right: 220px;
}
.center-wrapper {
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 2、中间栏设置宽度自适应，此时左右两栏被挤到下一行 */
width: 100%;
}
.left {
width: 200px;
background-color: lightskyblue;
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 3、左右两栏设置负外边距，使它们回到同一行 */
margin-left: -100%;
}
.right {
width: 200px;
background-color: deepskyblue;
/* 1、三栏同时设置左浮动，此时它们处于同一行 */
float: left;
/* 3、左右两栏设置负外边距，使它们回到同一行 */
margin-left: -200px;
}
