CSS實現兩列布局，一列固定寬度，一列寬度自適應方法

不管是左是右，反正就是一邊寬度固定，一邊寬度自適應。

博客園的很多主題也是這樣設計的，我的博客也是右側固定寬度，左側自適應屏幕的布局方式。

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>

實現方式方式有如下幾種：

1.固定寬度區浮動，自適應區不設寬度而設置 margin

我們以右側寬度固定，左側寬度自適應為例：

css代碼：

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

實現效果圖：

右側一直固定不動，左側根據屏幕的剩余大小自適應。

但實際上這個方法是有局限性的，那就是html結構中sidebar必須在content之前才行！

但我需要sidebar在content之后！因為我的content里面才是網頁的主要內容，我不想主要內容反而排在次要內容后面。

那么上面講解的第一種方法就無效了。

就需要下面的方法來實現。

2.float與margin配合使用

首先我們調整一下html結構：

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

css代碼：

#content {
  margin-left: -300px; float: left; width: 100%;
}
#content .contentInner{
  margin-left:300px;
}
#sidebar {
  float: right; width: 300px;
}

這樣實現，contentInner的實際寬度就是屏幕寬度-300px。

3.固定寬度區使用絕對定位，自適應區設置margin

html結構：

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

css代碼：

#wrap{
  position:relative;
}
#content {
  margin-right:300px;
}
#sidebar {
  position:absolute;
  width:300px;
  right:0;
  top:0;
}

4.使用display:table實現

html結構：

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

css代碼：

#wrap{
  display:table;
  width:100%;
}
#content {
  display:table-cell;
}
#sidebar {
 width:300px;
  display:table-cell;
}

當然最后一種方法在IE7以及以下瀏覽器不兼容，因為IE7設置display為table不識別。