前言&＃xff1a;
- 圣杯布局是一种很经典的布局方法&＃xff0c;经典的float方式实现圣杯布局是通过左、中、右三层的包裹层设置左右padding来预留左右元素的位置&＃xff0c;重难点是margin 负值&＃xff1b;
- 而flex方法实现则简单得多&＃xff0c;即给中间元素设置flex&＃xff1a;1&＃xff0c;接着写死左右元素宽度&＃xff0c;最后利用order进行顺序排列
float方式
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle><style>html body {margin: 0;padding: 0;}header{width: 100%;height: 40px;background-color:gray;}footer{width: 100%;height: 40px;background-color:gray;}.main {height: calc(100vh - 80px);padding-left: 300px; padding-right: 200px;}.center {width: 100%;height: 100%;background-color: aqua;float: left;}.left {width: 300px;height: 100%;background-color: pink;float: left;margin-left: -100%; position: relative; left: -300px;}.right {width: 200px;height: 100%;background-color: skyblue;float: left;margin-left: -200px;position: relative;right: -200px;}style>
head><body><div><header>header><div class&＃61;"main"><div class&＃61;"center">div><div class&＃61;"left">div><div class&＃61;"right">div>div><footer>footer>div><script>script>
body>html>
flex方式&＃xff1a;
DOCTYPE html>
<html lang&＃61;"en"><head><meta charset&＃61;"UTF-8"><meta http-equiv&＃61;"X-UA-Compatible" content&＃61;"IE&＃61;edge"><meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0"><title>Documenttitle><style>html body {margin: 0;padding: 0;}header{width: 100%;height: 40px;background-color:gray;}footer{width: 100%;height: 40px;background-color:gray;}.main {height: calc(100vh - 80px);display: flex;}.center {width: 100%;flex: 1;order: 2; background-color: aqua;}.left {width: 300px;order: 1;background-color: pink;}.right {width: 200px;order: 3;background-color: skyblue;}style>
head><body><div><header>header><div class&＃61;"main"><div class&＃61;"center">div><div class&＃61;"left">div><div class&＃61;"right">div>div><footer>footer>div><script>script>
body>html>
效果&＃xff1a;
京公网安备 11010802041100号