<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>聖盃-雙飛翼佈局</title>
<style>
#container,#container2,#container3 {
overflow:hidden;
margin:10px 0;
}
#mid, #left, #right{
float: left;
min-height:50px;
}
#mid{
width: 100%;
background: salmon;
}
#container #mid div{
padding: 0 300px 0 300px;
}
#left,#right{width:300px;}
#left{
margin-left: -100%;
background: yellow;
}
#right{
margin-left: -300px;
background: lightblue;
}
#container2{padding: 0 300px 0 300px;}
#container2 #left{position:relative;left:-300px;}
#container2 #right{position:relative;right:-300px;}
#container3 #mid{padding: 0 300px;box-sizing:border-box;}
</style>
</head>
<body>
<div id='container'>
<div id='mid'>
<div>雙飛翼佈局，MID元素中嵌套一個DIV，設置padding:0 300px;</div>
</div>
<div id='left'>left,不需要left定位</div>
<div id='right'>right,不需要right定位</div>
</div>
<div id='container2'>
<div id='mid'>聖盃佈局,MID的父元素設置padding:0 300px;</div>
<div id='left'>left,需要left:-300px;</div>
<div id='right'>right,需要right:-300px;</div>
</div>
<div id='container3'>
<div id='mid'>MID元素本身設置padding:0 300px; box-sizing:border-box;</div>
<div id='left'>left,不需要left定位</div>
<div id='right'>right,不需要right定位</div>
</div>
</body>
</html>
參考：https://github.com/luneshao/Note/blob/master/CSS/%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80.md