前言
自适应三栏布局是常见的布局之一，一般实现为两边定宽而中间自适应
正文
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; }
