做了一道貓廠很經典的前端筆試題，解決了一直以來在兩列布局的認識上思考太少的毛病。
題目要求是右側aside固定寬度200px，左側content自適應。
本來直接用float，發現aside總是會被“擠”到content以下、footer以上的位置，debug了好久最終還是看了大牛的部落格才意識到這個問題所在。
基本思路是：
①content寬度不設，讓它預設auto，設一下高度（好看）
②aisde在右邊那就 float:right ，設定固定寬度200px
③重點。。給content設定aside方向（本題右）上的maigin，且margin值要足夠放下aside
④超重點，也是坑人的地方。。。把body中代表aside的div提到content這個div的前面，這樣瀏覽器渲染content的時候它就正好“疊”到了aside的左邊距上，完美並排。
效果圖
實現代碼
（不同螢幕不同瀏覽器效果不同，未做多瀏覽器安全色，僅供參考思路）
body{margin: 0;padding: 0 5px;}#header{width: 100%;height: 18%;border: green 1px solid;margin-bottom: 1%;}#logo{width: 80px;height: 80px;border: red 1px solid;float: left;margin-top: 20px;margin-left: 20px;}#username{width: 200px;height: 30px;border: black 1px solid;float: right;margin-top: 75px;margin-right: 20px;text-align: right;}#main{overflow: hidden;}#content{height: 430px;border: blue 1px solid;margin-right: 240px;}#aside{width: 200px;height: 30px;border: red 1px solid;float: right;}#footer{width: 100%;height: 9%;border: black 1px solid;clear: both;margin-top: 1%;}
<html><head><title>兩列布局--右側定寬左側自適應</title><link rel="stylesheet" type="text/css" href="right200px_and_leftauto.css"></head><body><div id="header"><div id="logo">Logo</div><div id="username">使用者名稱</div></div><div id="main"><div id="aside">aside-固定寬度200px</div><div id="content">content-寬度自適應</div></div><div id="footer">footer</div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
