一、两列布局左列自适应右列固定宽度
1.绝对定位法
右列设置固定宽度,并设置绝对定位。左列则用外边距撑开。不设定宽度自适应。
HTML
<div class="left">left content</div>
<div class="right">right content</div>
CSS
*{padding: 0;margin: 0;}
.left,.right{ height: 999px;}
.left{margin-right: 200px;background: #eee;}
.right{width:200px;position:absolute;top:0;right:0;background: #aaa;}
效果:
二、两列布局左列固定宽度右列自适应
HTML
<div class="left">left content</div>
<div class="right">right content</div>
CSS
.left{width: 200px;float: left;background: #eee;}
.right{background: #aaa;}
.left,.right{ height: 999px;}