负边距实现超级流体布局

2010年10月12日 由 Key4ever 留言 »

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

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

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

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

这样做的优点:

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

这样做的缺点:

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

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

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>负边距实现三栏布局</title> <style> #wrapper{text-align:center; background:gray;} .main{background:red; margin-left:210px;} .left{float:left; width:200px; background:lime;} .right{float:right; width:250px; background:orange;} #in{float:right; width:100%; margin-left:-200px;} #in-out{margin-right:260px;} #out{float:left; margin-right:-1465px; width:100%;}
</style> </head> <body> <div id="wrapper"> <div class="right"> <h1>我怎样都会在右边:P </h1> </div> <div id="out"> <div id="in-out"> <div class="left"> <h1>左边:P</h1> </div> <div id="in"> <div class="main"> <h1>中间啊:P</h1> </div> </div> </div> </div> </div> </body> </html>

扩展阅读:

《多栏自适应布局问题浅谈》

《寻找圣杯系列》

《一个垂直水平居中效果》

随机日志

广告位

7 条评论

  1. bolo说道:

    #out区的负边距则可用大于right的任何整数值,为什么呢?
    左浮动啊

  2. Felicia说道:

    不能理解。。优先让搜索引擎抓取重要内容。。
    那Html是不是写错了。。

发表评论

使用新浪微博登陆