负边距除了可以进行简单的hack和实现适应浏览器的垂直和水平居中外，更多会用到在流体布局里。

今晚搜索更多相关内容的时候，从这里还学到一种结构多变（左右两栏宽度固定）但排列输出不变的负边距流体布局，我简称神奇流体布局，太神奇了，练习之余总结分享一下。

如下图，无论相关区域在相关区域里怎样滚动变换位置，输出位置都不变，left、main、right区都会分别从左到右排列。

重构也有好玩的东西，好玩之余也可以想想；

这样做的优点：

• 结构可任意调整却不影响输出（信息量大而且用户网速慢时优先显示重要部分）
• 优先让搜索引擎抓取重要内容
• 用作高难度面试题（有必要？）
• 忽悠小MM

这样做的缺点：

• 代码不简洁，实现这样的三栏布局可用3个div解决，这里用了6个（致命）
• 可能增加重构难度

代码如下（我要看demo），有一个地方想不明白，#in区的负边距可用大于mian宽度但小于1400px的任何整数值。#out区的负边距则可用大于right的任何整数值，为什么呢？ 继续阅读 →