css佈局——雙飛翼佈局和聖盃佈局
阿新 • • 發佈：2019-01-11
雙飛翼佈局和聖盃佈局都將介面分為左中右三部分，中間部分是主體部分。
聖盃佈局實現程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .test { height: 300px; padding:0 400px 0 200px; } .main { float: left; width: 100%; background-color: red; height: 300px; word-break: break-all; } .left { float: left; background-color: yellow; width: 200px; margin-left: -100%; height: 300px; position: relative; left:-200px; word-break: break-all; } .right { float: left; background-color: blue; width: 400px; margin-left: -400px; height: 300px; position: relative; left: 400px; word-break: break-all; } </style> </head> <body> <div class="test"> <div class="main">main</div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
解釋：
1.main寫在最前面（for 載入時先載入main部分）,用margin將left拉到main的左邊，將right拉到它的右邊，注意此時left和right是覆蓋main部分的
2. main部分的寬度是100%，這說明它會佔滿一行，為了空出空間給left和right，需要對他們三外面的容器test進行設定：padding：0 400px 0 200px;
3. 接下來把空出來的部分分配給left和right，這裡用到相對定位。.left{position:relative;left:-200px;}
雙飛翼佈局實現程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .test { height: 300px; } .main { float: left; width: 100%; background-color: red; height: 300px; word-break: break-all; } .left { float: left; background-color: yellow; width: 200px; margin-left: -100%; height: 300px; word-break: break-all; } .right { float: left; background-color: blue; width: 400px; margin-left: -400px; height: 300px; word-break: break-all; } .main_n { margin:0 400px 0 200px; } </style> </head> <body> <div class="test"> <div class="main"><div class="main_n">main</div></div> <div class="left">left</div> <div class="right">right</div> </div> </body> </html>
解釋：
雙飛翼佈局跟聖盃佈局實現的目標相同，實現手法區別主要在於後面的main定位。
當left和right佔領main身體時，聖盃佈局通過外部容器padding來實現left和right與main分離，而雙飛翼佈局則直接在main內定義一個div，通過該div的padding為left和right讓出空間。
看圖得區別：
聖盃佈局：
雙飛翼佈局：
