---恢復內容開始---
馬上要到秋招了，開始在牛客網上刷題，今天刷了一個阿里的16年前端筆試題的編程題：兩欄布局。自己做的還是不好，所以查了資料寫一下CSS中兩欄布局和三欄布局
1.兩欄布局
原題是“核心區域左側自適應，右側固定寬度 200px”
方法一：自身浮動法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #aside{ float: right; width:200px; border:1px solid red; } #content{ margin-right: 201px; border:1px solid blue; height:400px; } </style> </head> <body> <div class="con"> <div id="aside">aside-定寬200px</div> <div id="content">content-自適應寬度</div> </div> </body> </html>
方法二：margin負值法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .content{ width: 100%; float: left; height: 400px; } #left{ margin-right: 200px; background-color: aquamarine; height: 400px; } #right{ float: left; margin-left: -200px; background-color: blue; height: 400px; } </style> </head> <body> <div class="content"> <div id="left"></div> </div> <div id="right">aside-定寬200px</div> <!--<div id="middle">content-自適應寬度</div>--> </body> </html>
在自適應塊left外再包一層div父層，並設置父層content左浮動，寬度為100%；子層left設置右邊距為右側right塊的寬度；最后設置固定塊為左浮動，設置margin-left:-200px;
2.三欄布局
方法一：絕對定位法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ width: 100%; } #left, #right{ position: absolute; top: 0px; width: 200px; height: 100%; } #left{ left: 0px; background-color: aquamarine; } #right{ right: 0px; background-color: red; } #mid{ margin: 0 200px; } </style> </head> <body> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </body> </html>
絕對定位法就是將左右欄進絕對定位，而中間欄只要設置左右margin為左右欄的寬度就可以。
方法二：margin負值法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body{ margin: 0; height: 100%; } #main{ width: 100%; height: 100%; float: left; } #body{ margin: 0 200px; height: 100%; background-color: blueviolet; } #left, #right{ width: 200px; float: left; height: 100%; } #left{ margin-left: -100%; background-color: aquamarine; } #right{ margin-left: -200px; background-color: chocolate; } </style> </head> <body> <div id="main"> <div id="body"></div> </div> <div id="left"></div> <div id="right"></div> </body> </html>
把要自適應寬度的塊放在最前面，並在外面包裹一層id為main的div父層，對該父層設置左浮動，然后再對id為body的子層設置左右邊距margin：0 200px；並設置左右塊為左浮動；並設置左邊塊的左邊距為-100%；右塊的左邊距為-200px；很奇怪，把黃色部分去掉就出不來結果，不知道這是什么原因
方法三：自身浮動法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html, body{ margin: 0; height: 100%; } #main{ margin: 0 200px; height: 100%; background-color: beige; } #left{ width: 200px; float: left; height: 100%; background-color: aqua; } #right{ width: 200px; float: right; height: 100%; background-color: palevioletred; } </style> </head> <body> <div id="left"></div> <div id="right"></div> <div id="main"></div> </body> </html>
把中間塊放在最后。