【逆戰班】 1.flex佈局 Flexible Box 模型，通常被稱為 flexbox，是一種一維的佈局模型。它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。我們說 flexbox 是一種一維的佈局，是因為一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。這裡 ...
【逆戰班】
1.flex佈局
Flexible Box 模型，通常被稱為 flexbox，是一種一維的佈局模型。它給 flexbox 的子元素之間提供了強大的空間分佈和對齊能力。我們說 flexbox 是一種一維的佈局，是因為一個 flexbox 一次只能處理一個維度上的元素佈局，一行或者一列。這裡我們利用flex佈局來實現兩列固定一列自適應
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #main{ display: flex;/*設為伸縮容器*/ } #left{ width:200px;/*左側固定寬度*/ height:400px; background:aqua; } #center{ flex-grow:1; /*填滿剩餘空間*/ height:400px; background:green;} #right{ width:200px;/*固定右側寬度*/ height:400px; background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
2.使用浮動方法
對左右兩部分分別使用float:left和float:right，float使左右兩個元素脫離文檔流，中間元素正常在正常文檔流中。對中間文檔流使用margin指定左右外邊距進行定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%;height: 400px; } #left{ width:200px;/*左側固定寬度*/ height:400px; float: left; /*設置容器左浮動*/ background:aqua; } #center{ width: 100%; height:400px; margin: 0 200px;/*設置容器左右外邊距*/ background:green;} #right{ width:200px;/*固定右側寬度*/ height:400px; float: right;/*設置容器右浮動*/ background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div> </body> </html>
3.使用浮動加calc函數
對三部分使用float:left，然後左右兩邊固定寬度，中間使用calc函數計算寬度。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%;height: 400px; } #left{ width:200px;/*左側固定寬度*/ height:400px; float: left; /*設置容器左浮動*/ background:aqua; } #center{ width: calc(100% - 400px);/*設置中間寬度為父容器寬度減去400px*/ height:400px; float: left;/*設置容器左浮動*/ background:green;} #right{ width:200px;/*固定右側寬度*/ height:400px; float:left;/*設置容器左浮動*/ background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
4.使用絕對定位
用絕對定位把左右兩部分固定在兩端，對中間文檔流使用margin指定左右外邊距進行定位。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0;padding: 0;} #main{ width: 100%; height: 400px; position: relative;/*父容器使用相對定位*/ } #left{ width:200px;/*左側固定寬度*/ height:400px; position: absolute;/*左側使用固定定位*/ left: 0;/*定位在容器最左邊*/ top: 0; background:aqua; } #center{ width:100%; height:400px; margin: 0 200px;/*設置中間容器左右外邊距*/ background:green;} #right{ width:200px;/*固定右側寬度*/ height:400px; position: absolute;/*右側使用固定定位*/ right: 0;/*定位在容器最右邊*/ top: 0; background:blue; } </style> </head> <body> <div id="main"> <div id="left"></div> <div id="center"></div> <div id="right"></div> </div> </body> </html>
效果圖如下：
