不管是左是右，反正就是一边宽度固定，一边宽度自适应。
博客园的很多主题也是这样设计的，我的博客也是右侧固定宽度，左侧自适应屏幕的布局方式。
<div id="wrap"> ="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div="content"="height:500px;background:#000;color:#fff;">自适应区> >
实现方式方式有如下几种：
1.固定宽度区浮动，自适应区不设宽度而设置 margin
我们以右侧宽度固定，左侧宽度自适应为例：
css代码：
#sidebar { float: right; width: 300px; } #content { margin-right: 300px; }
实现效果图：
右侧一直固定不动，左侧根据屏幕的剩余大小自适应。
但实际上这个方法是有局限性的，那就是html结构中sidebar必须在content之前才行！
但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。
那么上面讲解的第一种方法就无效了。
就需要下面的方法来实现。
2.float与margin配合使用
首先我们调整一下html结构：
> class="contentInner"> 自适应区 >
css代码：
#content { margin-left: -300px; float: left; 100%; } #content .contentInner{300px; } #sidebar { 300px; }
这样实现，contentInner的实际宽度就是屏幕宽度-300px。
3.固定宽度区使用绝对定位，自适应区设置margin
html结构：
>我现在的结构是在前面#wrap{ position:relative; }absolute; width:300px; right:0; top:0; }
4.使用display:table实现
html结构：
display:table;100%; }table-cell; } width:table-cell; }
当然最后一种方法在IE7以及以下浏览器不兼容，因为IE7设置display为table不识别。
原文链接：/html/994579.html