CSS 两列布局 之 左侧适应，右侧固定 3种方式

第一种：左侧用margin-right，右侧float：right
CSS代码：

html,
body,ul,li
#wrapper {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

.left,
.right {
min-height: 500px;
border: 0;
}

.left {
background-color: #999999;
margin-right: 151px;

}

/*左适应右固定第一种*/
.right {
background-color: #808080;
width: 150px;
float: right;
}

.content {
background-color: #CCCCCC;
/*padding-right: 150px;*/
/*width: 100%;*/
}

.content li{
float: left;
width: 150px;
}

html代码：

<div id="wrapper">
<div class="right">
右侧菜单
</div>
<div class="left">
<div class="content">
<ul>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
<li>我是sad放假阿萨洛夫 </li>
</ul>
</div>
</div>

</div>

第二种：左侧同样用margin-right 右侧采用绝对定位
CSS代码（只需要把第一种注释部分替换即可）：

/*左适应右固定第一种*/
/*.right {
background-color: #808080;
width: 150px;
float: right;
}*/

/*左适应右固定第二种(把上面的替换为改代码即可)*/
.right {
background-color: #808080;
width: 150px;
position: absolute;
top: 0px;
right: 0px;
}

第三种：左右都浮动 且 右侧用负margin值
CSS代码：

.wrap {
overflow: hidden;
background: #EEE;
}

.wrap-right {
width: 300px;
/*position: relative;*/
float: right;
margin-left: -300px;
background: #AAA;
}

.wrap-left {
width: 100%;
float: left;
}

.left-con {
margin-right: 300px;
background: #DDD;
}

.left-con,
.wrap-right {
height: 300px;
}

HTML代码：

<div class="wrap">
<div class="wrap-left">
<div class="left-con">
我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc我是cccccccccccc
</div>
</div>
<div class="wrap-right">
<a href="" target="_blank">我是mmmmmm</a>
</div>
</div>

最终效果：