两列布局宽度自适应

一、两列布局左列自适应右列固定宽度

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;}