一列固定寬度，另外一列自適應(yīng)寬度
如何實(shí)現(xiàn)
浮動元素 + 普通元素margin
<style>
#content:after{
content: '';
display: block;
clear: both;
}
.aside{
width: 200px;
height: 500px;
background: yellow;
float: left;
}
.main{
margin-left: 210px;
height: 400px;
background: red;
}
#footer{
background: #ccc;
}
</style>
<div id="content">
<div class="aside">aside</div>
<div class="main">content</div>
</div>
<div id="footer">footer</div>
如果需要側(cè)欄在右邊只需將.aside的浮動方向改成向右，.main的margin方向改成右就可以了。
為什么HTML結(jié)構(gòu)里aside在main前？
如果main在aside前面的話，瀏覽器渲染的時候因?yàn)閙ain是一個div渲染時按照塊級元素渲染，占據(jù)一整行。那么接下去的aside設(shè)置浮動就會在main的下面一行實(shí)現(xiàn)浮動。而不會表現(xiàn)出懸浮于main上面的效果。
