CSS 實現三列布局，左右固定寬度，中間自適應，如下圖所示：
1、絕對定位法
原理是將左右兩邊使用absolute定位，因為絕對定位使其脫離文檔流，后面的 middle 會自然流動到他們上面，然后使用margin屬性，留出左右元素的寬度，既可以使中間元素自適應屏幕寬度。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ position: relative; width: 100%; height: 500px; } .left{ position:absolute; top: 0; left: 0; width: 200px; height: 100%; background-color: #3898b1; } .right{ position:absolute; top: 0; right: 0; width: 200px; height: 100%; background-color: #ce7486; } .middle{ margin: 0 200px; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> </body>
2、自身浮動法
原理就是對左右分別左浮動和右浮動，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中。對中間文檔流使用margin指定左右外邊距進行定位。
該布局法的不足是三個元素的順序，middle一定要放在最后，middle占據文檔流位置，所以一定要放在最后，左右兩個元素位置沒有關系。當瀏覽器窗口很小的時候，右邊元素會被擠到下一行。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ width: 100%; height: 500px; } .left{ float: left; width: 200px; height: 100%; background-color: #3898b1; } .right{ float: right; width: 200px; height: 100%; background-color: #ce7486; } .middle{ margin: 0 200px; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="right">right</div> <div class="middle">middle</div> </div> </body>
3、flex 布局法
原理就是為父元素添加樣式display：flex，左右固定寬度，中間設置flex:1,middle一定要放在中間。
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ display: flex; width: 100%; height: 500px; } .left{ width: 200px; height: 100%; background-color: #3898b1; } .right{ width: 200px; height: 100%; background-color: #ce7486; } .middle{ flex: 1; height: 100%; background-color: #cbaf91; } </style> </head> <body> <div class="main"> <div class="left">left</div> <div class="middle">middle</div> <div class="right">right</div> </div> </body>
4、聖杯布局
原理主要是margin負值法，接下來我們一步一步分析它的實現過程：
- middle 一定要寫在最前面
<div class="main"> <div class="middle">middle</div> <div class="left">left</div> <div class="right">right</div> </div>
- left和right設置固定寬度，middle設置100%撐滿：
<style> *{ margin: 0; padding: 0; font-size: 50px; } .left{ width: 200px; background-color: #3898b1; } .right{ width: 200px; background-color: #ce7486; } .middle{ width: 100%; background-color: #cbaf91; } </style>
- 設置全部左浮動，由於middle寬度為100%，所以占了一行
.left,.right,.middle{
float: left;
}
- left設置 margin-left: -100%; 拉回行頭
設置margin-left為負值會讓元素自身位置發生變化，由於浮動的關系，元素被往左拉了一個center元素的寬度(100%)故回到了開頭
- right元素設置
margin-left: -200px;拉回行尾
- 現在的問題就是左右兩邊的元素覆蓋了center元素的內容，我們可以給容器main加上兩邊padding
.main{
padding: 0 200px;
}
- 在設置了padding后，左右元素都被擠了進來，我們可以設置position:relative解決，因為浮動元素已經脫離了文檔流，所以不能設置absolute。 通過設置left和right元素的相對位置，實現定位：
<style> *{ margin: 0; padding: 0; font-size: 50px; } .main{ padding: 0 200px; } .left,.right,.middle{ position: relative; float: left; } .left{ margin-left: -100%; left: -200px; width: 200px; background-color: #3898b1; } .right{ margin-left: -200px; right: -200px; width: 200px; background-color: #ce7486; } .middle{ width: 100%; background-color: #cbaf91; } </style>