圣杯布局
优点:
中间部分先加载，且中间自适应宽度，左右定宽。
实现方式:
main left right 设置float:leftleft: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:0container 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>
