到這裡，是不是感覺很有成就感？但是很遺憾的告訴你，還沒結束哦！
我們現在的確是硬性的實現了固比固布局。但是要記住，中間盒子是自適應的寬度，所以中間盒子裡的內容會被左右盒子給壓住一部分。
中間盒子的內容被蓋住
所以，我們的工作還沒停止。
第六步：讓中間自適應的盒子安全顯示
首先:利用父級元素設定左右內邊距的值，把父級的三個子盒子往中間擠。**如下：
.container這裡的200px是左右盒子的寬度。
效果如下：
利用父級的內邊距將盒子往中間擠
我們可以看到，左右兩邊的內邊距是有了，但是中間盒子上的內容還是被壓著。
其次:給左右兩個盒子加乙個定位，加了定位之後左右兩個盒子就可以設定left和right值。**如下：
.left
.right{position: relative;right: -210px;
第七步：看最終效果圖
聖杯布局大功告成啦！
CSS 聖杯 雙飛翼布局
html結構 123 123123 css container 把左右兩邊距離空出來 containercenter 設定widh為100 即充滿整個容器 center浮動 設定left，center，right左浮動。清除container浮動，保證後面的div正常布局 left,center,r...
CSS聖杯布局（雙飛翼布局）
我在網上看了有關於css聖杯布局的文章，有很多直接丟 給效果，看得我雲裡霧裡。首先按我的理解來講述一下聖杯布局吧。首先他的作用就是 像 網那樣，中間先渲染，兩邊後渲染，其次中間的內容是自適應高度的。最好的例子就是 網了。樣式 1.三列布局 2.中間板塊先渲染，自適應高度寬度 3.兩邊定寬 那我們就開...
CSS布局 聖杯布局 雙飛翼布局
聖杯布局和雙飛翼布局解決的都是兩邊頂寬 中間自適應的三欄布局問題，要實現中間部分優先渲染。先上兩個demo。聖杯布局 雙飛翼布局 兩者的異同 首先如開題所述，兩種布局解決的問題是一樣的，只是實現方式有些微小的差別 兩者都採用了向左浮動的方式，還用實現布局的重點都是負邊距的使用 聖杯布局使用固定的左右...