负边距(negative margin)实现自适应的div左右排版

我记得我写过一篇  css中的负margin技术以及运用  的文章，那是很久以前的事了，现在看来那篇文章讲了很多，但是始终没把握好重点，现在再通过这篇文章clear一下思路。     左右排版本来是可以这样实现的：两边都使用百分比，然后左右浮动。但是这样做满足不了下面这样的场景：    在一个文章页面里面，分为左边的正文区域和右边的与文章关联的其他信息区域，我想让正文区域能随着用户的显示屏宽度变化而变化，这似乎百分比就能做到，但是如果使用百分比，左右两边都必须有一个固定的比值，那样右边也会随着用户显示屏的宽度变化，如果用户的显示屏很宽，那这右边就显得似乎国语宽了，正文无论多款是无所谓的，但是侧边最好是一个固定值。    就像这种下图所示效果：            也就是说我需要一个左边自适应，而右边固定的左右布局，或者说某一边固定，另一边占据剩余部分，该如何做呢？     我找到的最好的答案是使用   负margin  （配合浮动），下面概括一下原理：     使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半部分，只要右边再内部使用一个div，外左边距为左边的宽度就实现了左右的排版。 1、左边固定，右边自适应     （1）右边使用margin-left值为200（刚好是左边的宽度）的宽度，那么左边就刚好能浮动上来。为什么说浮动上来呢，因为如果没有这个margin: 0 0 0 -200px;由于右边的宽度是100%，因此左边肯定是排在下面的。     （2）左边虽然能浮动上来，但是右边和左边的内容是有重叠的             所以你还需要绿色部分的代码，右边再内部使用一个div，外左边距为左边的宽度 <div>     <div style="float: right; margin: 0 0 0 -200px; width: 100%;">         <div style="margin: 0 0 0 200px; background: #e4e4e4;">             这是右边部分         </div>     </div>     <div style="float: left; width: 200px; background: #669999">             这是左边部分     </div> < /div>     这个产生的效果如下图：（图片区域宽度固定的，但是文字是占据这个div的剩余部分，这里右边没有紧贴边框是因为父div有较大padding的原因没能挤满，不要受误导）。     提示：真正在实现的时候好像没必要左边必须写在后面，我试过，即使按从左到右书写也是可以的，但是很多大型网站都是反着写，我就按正规的来讲了。 2、右边固定，左边自适应 跟上一个最大的不同点就是，左右两个div容器的代码的前后位置换了，原因就是"float:rihgt"一定要在"float:left"前面。 <div> <div style="float: right; width: 200px; background: #669999">             这是右边部分 </div> <div style="float: left; margin: 0 -200px 0 0; width: 100%;"> <div style="margin: 0 200px 0 0; background: #e4e4e4;">                 这是左边部分 </div> </div> </div> 复制代码 3、左右各占一定百分比，这就简单了，把上面任意一种将200px改成比例值20%就实现了。 <div> <div style="float: right; margin: 0 0 0 -20%; width: 100%;"> <div style="margin: 0 0 0 20%; background: #e4e4e4;">                 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999">             这是左边部分 </div> </div> 复制代码 4、再加一栏，实现左中右三栏布局。这只要再加一栏，float为right的多空一些位置就行了。这里以按比例为例 <div> <div style="float: right; margin: 0 0 0 -40%; width: 100%;"> <div style="margin: 0 0 0 40%; background: #e4e4e4;">                 这是右边部分 </div> </div> <div style="float: left; width: 20%; background: #669999">             这是左边部分 </div> <div style="float: left; width: 20%; background: #663333">             这是中间部分 </div> </div> 复制代码 5、实现框架页的效果（左右可分别出现滚动条，页面无滚动条）：只要左右div各加position: absolute; overflow: scroll; height: 100%;左边再加left: 200px;即实现了，这里用了绝对定位，因此float属性可以干掉了 <div> <div style="margin: 0 0 0 -200px; width: 100%; position: absolute; overflow: scroll;             height: 100%; left: 200px;"> <div style="margin: 0 0 0 200px; background: #e4e4e4;">                 这里是右边部分 </div> </div> <div style="width: 200px; background: #669999; position: absolute; overflow: scroll;             height: 100%;">             这是左边部分 </div> </div> 复制代码