圣杯布局

优点:

中间部分先加载，且中间自适应宽度，左右定宽。

实现方式:

main left right 设置float:left
left:margin-left:-100%;right:margin-left:-200px;
container padding: 0 200px;
left right 相对定位分别向左右移动 -200px;
container: 设置min-width:400px 防止窗口过小，页面错位

实现效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,div{margin: 0;padding: 0;}.container{padding: 0 200px;min-width: 400px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.left,.right{position: relative;width: 200px;float: left;background-color: blue;}.left{margin-left: -100%;left: -200px;}.right{margin-left: -200px;right: -200px;}</style>
</head>
<body><div class="container"><div class="main">中</div><div class="left">左</div><div class="right">右</div></div>
</body>
</html>

双飞翼

实现方式

为main内套一个div
为main设置margin:0 200px
优点: 无须使用圣杯中为left right 设置相对定位无须为container设置padding

实现效果同上

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,div{margin: 0;padding: 0;}.container{min-width: 400px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.main_w{margin: 0 200px;}.left,.right{width: 200px;float: left;background-color: blue;}.left{margin-left: -100%;}.right{margin-left: -200px;}</style>
</head>
<body><div class="container"><div class="main"><div class="main_w">中</div></div><div class="left">左</div><div class="right">右</div></div>
</body>
</html>

绝对定位布局

实现方式

无须为left right设置浮动只需绝对定位分别 left:0 right:0
container padding为0 20px

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body,div{margin: 0;padding: 0;}.container{position: relative;padding: 0 200px;}.container div{height: 200px;}.main{width: 100%;background-color: red;float: left;}.left,.right{width: 200px;position: absolute;background-color: blue;top: 0;}.left{left: 0;}.right{right: 0;}</style>
</head>
<body><div class="container"><div class="main">中</div><div class="left">左</div><div class="right">右</div></div>
</body>
</html>