标签归档:负边距

负边距实现超级流体布局

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

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

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

重构也有好玩的东西,好玩之余也可以想想;

这样做的优点:

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

这样做的缺点:

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

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