圖1. 樣式
圖二，設置浮動使三個樣式在一行
在left,right,middle 添加float:left 浮動,這時候會發現middle寬度縮小.
圖三，改變中間寬度
添加middle為 width: 100%，中間部分middle設置100%會撐滿，這樣因為浮動的關系，middle會占據整個container，左右兩塊區域被擠下去.
圖三，移動左邊到第一行左側
在left樣式增加margin-left：-100%為負值，讓left回到第一行左側位置
圖四：移動右邊到第一行右側
在right樣式增加margin-left: -200px, 200px是右邊的自身高
圖五：改變父元素的內邊距
在.container增加padding: 0 200px;
圖六：此時發現左右元素遮擋了中間元素的內容，我們通過相對定位position定位屬性來解決
在left和right樣式里面添加postition: relative, 被設置為relative相對定位后，其元素不會脫離標準流，不會影響其他元素的排布。
在left樣式增加 left:-200px; , right樣式增加 left:200px; 向左增加負200px元素，把左邊頂到第一行前端，right想左增加200px元素正好把右邊頂到第一末端.
代碼如下：
總結圣杯布局和飛翼布局區別：
圣杯布局和飛翼布局解決的問題是一樣的，就是兩邊頂寬，中間自適應的三欄布局，中間欄要在放在文檔流前面以優先渲染。
圣杯布局和飛翼布局解決問題的方案在前一半是相同的，也就是三欄全部float浮動，但左右兩欄加上負margin讓其跟中間欄div并排，以形成三欄布局。
不同在于解決”中間欄div內容不被遮擋“問題的思路不一樣：
圣杯布局，為了中間div內容不被遮擋，將中間div設置了左右padding-left和padding-right后，將左右兩個div用相對布局position:relative并分別配合right和left屬性，以便左右兩欄div移動后不遮擋中間div。
飛翼布局，為了中間div內容不被遮擋，直接在中間div內部創建子div用于放置內容，在該子div里用margin-left和margin-right為左右兩欄div留出位置。
容器
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
