Div0爲最大的，Div1和Div2爲左右分割的DIV
#Div0
{
float:left; background-color:blue; width:100%; height:180px;
}
#Div1
{
float:left; background-color:blue; width:70%; height:180px;
}
#Div2
{
background-color: green; width:30%;height:180px; float:right;
}
整理的實現三個並排div，兩邊固定寬度，中間自適應的四個方法，廢話不多說，先上代碼，可以直接複製看效果。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Description" content="">
<title>Document</title>
<style>
html,body{width:100%;height:100%;margin:0;padding:0;}
.cf:after{content:"";display:block;height:0;clear:both;}
.wrap{width:100%;height:200px;}
.left{width:400px;background:red;}
.center{background:#ececec;}
.right{width:400px;background:yellow;}
/*float法*/
.float .left{float:left;height:200px;}
.float .center{margin:0 400px;height:200px;}
.float .right{float:right;height:200px;}
/*position法*/
.position{position:relative;}
.position .left{position:absolute;top:0;left:0;height:200px;}
.position .center{height:200px;margin:0 400px;}
.position .right{position:absolute;top:0;right:0;height:200px;}
/*table法*/
.table{display:table}
.table .inner{display:table-cell;}
/*flex法*/
.flex {display:box;display:-webkit-box;display:-moz-box;display:-moz-box;}
.flex .left{height:200px;}
.flex .center{-webkit-box-flex:1;box-flex:1;-moz-box-flex:1;}
.flex .right{height:200px;}
</style>
</head>
<body>
<div class="wrap float cf">
<div class="left"></div>
<div class="right"></div>
<div class="center">
歡迎來到德萊聯盟1！
</div>
</div><br/>
<div class="wrap position">
<div class="left"></div>
<div class="center">
歡迎來到德萊聯盟2！
</div>
<div class="right"></div>
</div><br/>
<div class="wrap table">
<div class="inner left"></div>
<div class="inner center">
歡迎來到德萊聯盟3！
</div>
<div class="inner right"></div>
</div><br/>
<div class="wrap flex">
<div class="left"></div>
<div class="center">
歡迎來到德萊聯盟4！
</div>
<div class="right"></div>
</div><br/>
</body>
</html>
float法
通過使兩邊的div左右浮動，脫離文檔流，再爲中間的div設置margin-left,margin-right值爲左右div的寬度即可.此處應該注意的是中間div在代碼中的位置，應該放在最後。存在問題：在屏幕寬度減少至一定程度後，右邊div會錯位，另起一行。
Postion法
其實跟float法異曲同工。存在問題：在屏幕寬度減少至一定程度後，右邊div錯位導致div之間會有重疊。
以上是網上常見的兩種方法，下邊是我個人擴展的兩種方法，不知道是否存在bug.
Table法
超級簡單，父元素設置display:table；width:100%，子元素設置display：table-cell即可。在屏幕寬度減少至一定程度後，div不會錯位。不支持ie7以下瀏覽器，話說微軟官方都宣佈放棄了ie10的技術支持，ie的這點瑕疵可以忽略不計。
Display:box法
利用css3的彈性盒子模型設置父元素display:box；中間div設置box-flex:1。因爲是新屬性，注意添加前綴兼容不同瀏覽器，不支持萬惡的IE。
上面四種方法,都可以達到同樣的效果，如下圖:
