css 布局相关

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

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

2. 固定区域绝对定位，自适应区域 margin

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

3. 使用 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>

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

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

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