版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013299635/article/details/81489613
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>layout_box</title>
<style>
html,body,h2{ margin: 0px;width: 100%; }
h2{
line-height:30px;
}
.pos{
position:relative;
width:80%;margin:0 auto;
text-align: center; overflow:hidden;
}
.pos1 #left,
.pos1 #right{width: 200px;height: 150px; background-color: #ffe6b8;position: absolute;top:0;}
.pos1 #left{left:0px;}
.pos1 #right{right: 0px;}
.pos1 #center{margin:0px 210px ;background-color: #eee;height: 150px; }
.pos2 #left_self,
.pos2 #right_self{ width: 200px;height: 150px; background-color: #ffe6b8 }
.pos2 #left_self {float: left;}
.pos2 #right_self{float: right;}
.pos2 #center_self{margin: 0 210px;height: 150px; background-color: #a0b3d6}
.pos3 #wrap{ width: 100%;height: 150px; background-color: #fff;float: left;}
.pos3 #wrap #center{ margin:0 210px; height: 150px;background-color: #ffe6b8; }
.pos3 #left_margin,
.pos3 #right_margin{ float: left;width: 200px;height: 150px;background-color: darkorange }
.pos3 #left_margin{margin-left: -100%; background-color: lightpink}
.pos3 #right_margin{margin-left: -200px;}
</style>
</head>
<body>
<h2>1.绝对定位法</h2>
<div class="pos pos1">
<div id = "left">我是左边</div>
<div id = "right">我是右边</div>
<div id = "center">我是中间我是中间我是中间我是中间我是中间我是中间</div>
</div>
<h2>2.使用自身浮动法</h2>
<div class="pos2 pos">
<div id = "left_self">我是左边</div>
<div id = "right_self">我是右边</div>
<div id = "center_self">我是中间我是中间我是中间我是中间我是中间我是中间</div>
</div>
<h2>3.圣杯布局</h2>
<div class="pos pos3">
<div id = "wrap">
<div id = "center">我是中间我是中间我是中间我是中间我是中间我是中间</div>
</div>
<div id = "left_margin">我是左边</div>
<div id = "right_margin">我是右边</div>
</div>
<h5><a href="https://blog.csdn.net/cinderella_hou/article/details/52156333/" target="_blank">来源：https://blog.csdn.net/cinderella_hou/article/details/52156333/</a></h5>
</body>
</html>