标签：
大家都知道好多网站都是左右布局的，很多公司在笔试和面试环节也常常问这个问题。一个去网易的师兄说14年腾讯面试的时候问过这个问题，网易在笔试和面试时候也问过这个问题，还有很多互联网公司也都涉及到这个问题。下面是我的一些小经验，疏漏之处还望大家体谅。
如果不用纯CSS解决此问题的话，我们可以先固定左侧DIV宽度为：100px，然后用JS取得当前浏览器宽度，再减去100px，然后赋值给右侧DIV宽度即可。这样就愉快的解决了，右侧的宽度就是自适应的了。
当然如果不是固定左侧DIV宽度为：100px的话，我们也可以用百分比设置左右侧DIV的宽度，也是自适应的。
那究竟该如何用CSS来解决这个问题呢？
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
CSS position 属性：
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
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>
由以上实现可以看出，在用绝对定位时，由于其在文档流中已经不存在，那么我们就很容易理解为什么第一实例里面的右侧DIV被左侧DIV遮挡了。所以，绝对定位时要注意设置margin值。
标签：
原文地址：http://www.cnblogs.com/syfwhu/p/4243580.html
