經典佈局---兩邊固定中間自適應
阿新 • • 發佈:2018-11-28
方法一:左右使用浮動,中間設定margin-left和margin-right
這種方式很簡單,就是讓左邊的左浮動,右邊的右浮動,然後通過設定中間的margin將內容從兩邊拉回來。
程式碼如下:
<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
貼出程式碼
<!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>