<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>两边定宽,中间自适应</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
/*html,body{ margin: 0px;width: 100%; }*/
h3{height: 100px;margin:20px 0 0;}
/*绝定定位法:最好是center的div放最后*/
/*#left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}
#left{left:0px;}
#right{right: 0px;}
#center{margin:2px 210px ;background-color: #eee;height: 200px; }*/
/*浮动法:center的div放最后,这种方法浏览器非常小的时候,最右边的会被挤下去*/
/*#left,#right{ width: 200px;height: 200px; background-color: #ffe6b8 }
#left{float: left;}
#right{float: right;}
#center{margin: 0 210px;height: 200px; background-color: #a0b3d6}*/
/*双飞翼布局:即负margin+float:left注意:center必须放最前面且必须包裹一个自己父级div;left,right依次*/
/*#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }
#left,#right{ float: left;width: 200px;height: 100px;background-color: darkorange }
#left {margin-left: -100%; background-color: lightpink}
#right{margin-left: -200px;}*/
/*圣杯布局:负margin+padding+float:left+relative,注意:容器container里的center最前,left,right依次*/
#left,#center,#right{ position: relative;float: left;min-height: 130px;}
#container{padding:0 220px 0 200px;overflow: hidden;}
#left{margin-left: -100%;left: -200px;width: 200px;background: red;}
#right{margin-left: -220px;right: -220px;width: 220px;background: green;}
#center{ width: 100%;background: blue;word-break: break-all;}
/*flex布局:整个父级div 定义flex,里面left center right的div顺序,center的flex定义为1*/
/*#box{width:100%;display: flex; height: 100px;margin: 10px;}
#left_box,#right_box{width: 200px;height: 100px; margin: 10px; background-color: lightpink}
#center_box{ flex:1; height: 100px;margin: 10px; background-color: lightgreen}*/
</style>
</head>
<body>
<!--<h3>实现三列宽度自适应布局(绝对定位法和浮动法共用)</h3>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间</div>-->
<!--<h3>双飞翼布局</h3>
<div id = "wrap">
<div id = "center">我是中间</div>
</div>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>-->
<h3>圣杯布局</h3>
<div id="container">
<div id = "center">我是中间</div>
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
</div>
<!--
<h3>使用flex进行布局</h3>
<div id = "box">
<div id = "left_box"></div>
<div id = "center_box"></div>
<div id = "right_box"></div>
</div>-->
</body>
</html>