<div class="content-head clearfix" >
<h2 class="title content-title" >div+css 两列布局，一边宽度固定，一边自适应宽度</h2>
</div>
<div class="content mod-cs-content text-content clearfix" id="content" >
<p ><strong>左侧自适应宽度的一行两列布局的实现，左列宽度自适应，右列宽度保持不变。</strong><br />
HTML的写法是：<br />
</p>
<div id="main"><br />
<div id="left">
<p>左列</p>
</div>
<br />
<div id="right">
<p>右列</p>
</div>
</div>
<br />
<br />
现在加CSS，要实现的效果是mian是可变的，right层宽度为200px，并且固定不变，要让left的宽度随main的变化而变化。CSS的写法是：<br />
<br />
#main{width:100%;background:#ccc}<br />
#left{width:100%;margin-left:-200px;float:left;background:red}<br />
#right{width:200px;float:right;background:green}<br />
<br />
基本上达到所要的效果了，#left的宽度设置为100%，加个margin-left:-200px;让它向左移动200PX，好让它腾出200PX的空间塞进right层。但有一个问题，左列被移动的那200PX隐藏了，看不到里面的东西。所以还必须增加一个DIV来辅助。<br />
<br />
修改了一下，HTML代码，变成：<br />
<p></p>
<strong>HTML代码：</strong>
<div id="main"><br />
<div id="left"><br />
<div id="innerLeft">
<p>左列</p>
</div>
<br />
</div>
<br />
<div id="right">
<p>右列</p>
</div>
</div>
<p ><br />
现在要让innerLeft把左边被隐藏的部分弄出来，所以得再加个margin-left:200px，修改后的CSS代码如下：<br />
<br />
</p>
<strong>CSS代码：</strong>#main{width:500px;background:#ccc}<br />
#left{width:100%;margin-left:-200px;float:left;background:red}<br />
#innerLeft{margin-left:200px;}<br />
#right{width:200px;float:right;background:green}<strong>右侧自适应宽度的一行两列布局的实现，<strong>右</strong>列宽度自适应，左列宽度保持不变。</strong><br />
<strong>CSS代码：</strong>
<p >.content{width:100%;background:#ccc;height:50px;margin-bottom:20px;}</p>
<p >.left{width:300px;float:left;background:red}<br />
.right{background:green}</p>
<p ><strong>HTML代码：</strong></p>
<p ></p>
<div class="content">
<div class="left2">
<p>左边</p>
</div>
<br />
<div class="right2">
<p>右边</p>
</div>
<span class="Apple-converted-space"></span></div>
<p></p>
</div>