經典佈局---兩邊固定中間自適應
阿新 • • 發佈：2018-11-28
方法一：左右使用浮動，中間設定margin-left和margin-right
這種方式很簡單，就是讓左邊的左浮動，右邊的右浮動，然後通過設定中間的margin將內容從兩邊拉回來。
例項效果圖.png
程式碼如下：
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } #wrapper{ min-width: 700px; } #left { width: 150px; height: 400px; background: green; float: left; } #right { width: 200px; height: 400px; background: red; float: right; } #center { background: pink; margin-left: 150px; height: 400px; margin-right: 200px; } </style> </head> <body> <div id="wrapper"> <div id="left">我是左邊</div> <div id="right">我是右邊</div> <div id="center">我是中間</div> </div> </body> </html>
方法二
在container中，我們將middle放在left和right的前面。
將三個都加上float: left, 再相對定位，因為在後面需要為左右兩塊區域重新定位。
middle部分 width:100%佔滿
此時middle佔滿了，所以要把left拉到最左邊，使用margin-left:-100%
這時left拉回來了，但會覆蓋middle內容的左端，要把middle內容拉出來，所以在外圍container加上 padding:0 220px 0 200px
middle內容拉回來了，但left也跟著過來了，所以要還原，就對left使用相對定位 left:-200px 同理，right也要相對定位還原 right:-220px
到這裡大概就自適應好了。如果想container高度保持一致可以給left middle right都加上min-height:130px
2018-11-04_002152.png
貼出程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } body { min-width: 700px; } #container { background: red; padding: 0 220px 0 200px; height:400px; } #middle, #left, #right { float: left; position: relative; min-height: 400px; } #middle { width: 100%; background: yellow; } #left { width: 200px; background: green; margin-left: -100%; left: -200px; } #right { width: 220px; background: blue; margin-left: -220px; right: -220px; } </style> </head> <body> <div id="container"> <div id="middle">我是middle</div> <div id="left">我是left</div> <div id="right">我是right</div> </div> </body> </html>