CSS3之聖杯布局和雙飛翼布局
阿新 • • 發佈：2019-04-24
purple type htm osi img code 方便 overflow class
聖杯布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聖杯布局</title> <!--聖杯布局：--> <!--1 搞一個容器，裏面放三個盒子--> <!--2 設置兩側盒子的寬度 固定--> <!--3 設置中間盒子的寬度等於容器的寬度(100%)--> <!--4 設置容器的padding等於兩側盒子的寬度--> <!--5 讓三個盒子在同一方向上浮動--> <!--6 設置左邊盒子的margin-left = -100%--> <!--7 通過定位調整左邊的盒子，讓左邊的盒子不要蓋住中間的區域--> <!--8 設置右邊盒子的margin-left = -自身的寬度--> <!--9 通過定位調整右邊的盒子，讓右邊的盒子不要蓋住中間的區域--> <!--10 給容器設置一個最小的寬度，防治縮小後變形--> <style> *{ margin: 0; padding: 0; } .box { background-color: purple; padding-left: 200px; padding-right: 200px; overflow: hidden;/*清除浮動，方便觀察，不是必須的*/ min-width: 500px;; } .center{ width: 100%; background-color: green; float: left; height: 500px; } .left{ width: 200px; background-color: yellow; float: left; height: 500px; margin-left:-100%; position: relative; left:-200px; } .right{ width: 200px; background-color: skyblue; float: left; height: 500px; position: relative; margin-left: -200px; left: 200px;; } </style> </head> <body> <div class="box"> <div class="center"> 測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試 </div> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>
雙飛翼布局：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雙飛翼布局</title> <!--雙飛翼實現步驟--> <!--1 搞一個容器，裏面放三個盒子--> <!--2 設置兩側盒子的寬度(固定)--> <!--3 設置中間盒子的寬度等於容器的寬度(100%)--> <!--4 讓三個盒子都在同一個方向上浮動--> <!--5 給中間的盒子添加一個子盒子--> <!--6 給子盒子設置margin：0 兩側盒子的寬度--> <!--7 設置左邊盒子的margin-left：-100%--> <!--8 設置右邊盒子的margin-left:-自身的寬度--> <style> *{ margin: 0; padding: 0; } .box { background-color: purple; overflow: hidden; /*min-width: 500px;;*/ } .center{ width: 100%; background-color: green; float: left; height: 500px; } .center_in { margin: 0 200px; height: 500px; background-color: pink; } .left{ width: 200px; background-color: yellow; float: left; height: 500px; margin-left:-100%; } .right{ width: 200px; background-color: skyblue; float: left; height: 500px; margin-left: -200px; } </style> </head> <body> <div class="box"> <div class="center"> <div class="center_in"> 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容 </div> </div> <div class="left"> </div> <div class="right"> </div> </div> </body> </html>
效果如下：
CSS3之聖杯布局和雙飛翼布局