如何用纯CSS布局两列，一列固定宽度，另一列自适应？

浏览数：41 / 时间：2015年06月09日

大家都知道好多网站都是左右布局的，很多公司在笔试和面试环节也常常问这个问题。一个去网易的师兄说14年腾讯面试的时候问过这个问题，网易在笔试和面试时候也问过这个问题，还有很多互联网公司也都涉及到这个问题。下面是我的一些小经验，疏漏之处还望大家体谅。

如果不用纯CSS解决此问题的话，我们可以先固定左侧DIV宽度为：100px，然后用JS取得当前浏览器宽度，再减去100px，然后赋值给右侧DIV宽度即可。这样就愉快的解决了，右侧的宽度就是自适应的了。

当然如果不是固定左侧DIV宽度为：100px的话，我们也可以用百分比设置左右侧DIV的宽度，也是自适应的。

那究竟该如何用CSS来解决这个问题呢？

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

CSS position 属性：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
关于浮动，浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。关于负边距的介绍在 http://www.cnblogs.com/2050/archive/2012/08/13/2636467.html#2457812 里有非常详细的介绍。下面是三种用CSS解决这个问题的方法，第一种是用绝对定位实现的，第二种是用浮动来实现的，第三种是用负边距来实现的。以下是具体代码和显示效果：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title></title>
 7     </head>
 8 
 9     <body>
10         <!--1.用绝对定位布局示例-->
11         <div style="width: 100px;height: 100px;background-color: red;position: absolute;">左侧宽度100px</div>
12         <div style="width: auto; height: 100px;background-color:blue;">*******右侧宽度自适应*******</div>
13         <div style="width: 100px;height: 100px;background-color: grey;position: absolute;">左侧宽度100px</div>
14         <div style="width: auto; height: 100px;background-color:yellow;margin-left:100px ;">*******右侧宽度自适应*******</div>
15         <!--2.用 浮动 布局示例-->
16         <div style="width: 100px;height: 100px;background-color: yellowgreen;float: left;">左侧宽度100px</div>
17         <div style="width: auto; height: 100px;background-color:lightgrey;">*******右侧宽度自适应*******</div>
18         <!-- 3.利用负边距布局示例-->
19         <div style="width:100px;height:100px;background-color:brown;position:relative;float:left;margin-right:-100px;">左侧宽度100px
20         </div>
21         <div style="float:right;width:100%;height: 100px;">
22             <div style="margin-left:100px;height:100px;background-color: wheat;">
23                 *******右侧宽度自适应*******
24             </div>
25         </div>
26     </body>
27 
28 </html>