在一个文章页面里面，分为左边的正文区域和右边的与文章关联的其他信息区域，我想让正文区域能随着用户的显示屏宽度变化而变化，这似乎百分比就能做到，但是如果使用百分比，左右两边都必须有一个固定的比值，那样右边也会随着用户显示屏的宽度变化，如果用户的显示屏很宽，那这右边就显得似乎国语宽了，正文无论多款是无所谓的，但是侧边最好是一个固定值。
就像这种右图所示效果：
也就是说我需要一个左边自适应，而右边固定的左右布局，或者说某一边固定，另一边占据剩余部分，该如何做呢？
我找到的最好的答案是使用负margin（配合浮动），下面概括一下原理：可以500%提高开发效率的前端UI框架！
使用负margin可以使当前的div左边能容纳下面的div浮动上来，因此把右边的div摆在前面，左边的摆后面，右边的使用负margin就能让左边的浮上来，这样就遮住了右边的左半部分，只要右边再内部使用一个div，外左边距为左边的宽度就实现了左右的排版。
1、左边固定，右边自适应
（1）右边使用margin-left值为200（刚好是左边的宽度）的宽度，那么左边就刚好能浮动上来。为什么说浮动上来呢，因为如果没有这个margin: 0 0 0 -200px;由于右边的宽度是100%，因此左边肯定是排在下面的。
（2）左边虽然能浮动上来，但是右边和左边的内容是有重叠的
所以你还需要绿色部分的代码， 右边再内部使用一个div，外左边距为左边的宽度
这是右边部分
查看更多关于负边距(negativemargin)实现自适应的div左右排版_html/css_WEB-ITno的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did105705