CSS实现两列布局，一列固定宽度，一列宽度自适应方法

1.固定宽度区浮动，自适应区不设宽度而设置 margin
2.float与margin配合使用
3.固定宽度区使用绝对定位，自适应区设置margin
4.使用display:table实现

 

html代码：

 

<div id="wrap">

  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>

  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>

</div>

 

html代码：

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>

#sidebar {
  float: right; width: 300px;
}
#content {
  margin-right: 300px;
}

右侧一直固定不动，左侧根据屏幕的剩余大小自适应。

但实际上这个方法是有局限性的，那就是html结构中sidebar必须在content之前才行！

但我需要sidebar在content之后！因为我的content里面才是网页的主要内容，我不想主要内容反而排在次要内容后面。

那么上面讲解的第一种方法就无效了。

就需要下面的方法来实现。
这样实现，contentInner的实际宽度就是屏幕宽度-300px。


#content {
  margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
  margin-left:300px;
}
#sidebar {
  float: right; width: 300px;
}
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">
    <div class="contentInner">
       自适应区
    </div>
  </div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

3.固定宽度区使用绝对定位，自适应区设置margin
#wrap{
  position:relative;
}
#content {
  margin-right:300px;
}
#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>、

4.使用display:table实现
#wrap{
  display:table;
  width:100%;
}
#content {
  display:table-cell;
}
#sidebar {
 width:300px;
  display:table-cell;
}
<div id="wrap">
  <div id="content" style="height:500px;background:#000;color:#fff;">我现在的结构是在前面</div>
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
</div>

html代码：

<div id="wrap">
  <div id="sidebar" style="height:500px;background:red;color:#fff;">固定宽度区</div>
  <div id="content" style="height:500px;background:#000;color:#fff;">自适应区</div>
</div>