圣杯布局
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> \* { padding: 0; margin: 0; } .container { padding-left: 200px; padding-right: 200px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; position: relative; left: -200px; } .center { float: left; width: 100%; height: 400px; background: yellow; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; position: relative; right: -200px; }</style></head><body><section class="container"> <div class="center"></div> <div class="left"></div> <div class="right"></div></section></body></html>步骤先写
center局部，width 100%center,left,right都是左浮动父容器
container设置padding-left和padding-right设置
margin-left为负值让left和right局部回到与center局部同一行设置绝对定位，让
left和right局部挪动到两边
毛病
center局部的最小宽度不能小于left局部的宽度
其中一列内容高度拉长，其余两列的高度不会主动填充
双飞翼布局
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> \*{ padding: 0; margin: 0; } .container { min-width: 600px; } .left { float: left; width: 200px; height: 400px; background: red; margin-left: -100%; } .center { float: left; width: 100%; height: 400px; background: yellow; } .center .inner { margin: 0 200px; } .right { float: left; width: 200px; height: 400px; background: blue; margin-left: -200px; }</style></head><body><section class="container"> <div class="center"> <div class="inner">双飞翼布局</div> </div> <div class="left"></div> <div class="right"></div></section></body></html>步骤
先写
center局部，width 100%center,left,right都是左浮动center局部减少一个内层div，并设margin-left,margin-right设置
margin-left为负值让left和right局部回到与center局部同一行
毛病
多加一层
dom树节点