欢迎来到 jackNEss'窝窝
I like simple mind

栅格化布局技术分析——圣杯布局

2011年09月03日

圣杯布局

在我们日常的项目中,web designer 们都按照着网页栅格化来进行设计页面,然后交给我们前端进行页面制作等,

基于栅格化布局,仔细分析各种方法的技术实现,可以发现下面三种技术被经常使用:

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position

这是实现布局的三个最基本的技术层面。只要巧妙运用,就能“拼”出各种布局的实现方案。

在选用布局的时候应该考虑的因数有:

  • 实现了内容与布局的分离,即Eric提到的Any-Order Columns.
  • 确保任何一栏为最高栏时不会出问题。
  • 良好的兼容性。
  • 易于修改。
  • 重要的内容放前面(书写HTML文档有个非常重要的原则)。

下面我就以三栏布局为例对我了解到的几种布局进行分析:

圣杯布局(Holy Grail Layout)

Matthew Levine 发布的一种新的布局方式,灵活运用容器的内边距、浮动元素的负边距和相对定位,接近完美的实现了三栏布局。DOM结构也很好,无需额外 标签。但是,我们来看看多达27页的评论吧。圣杯布局最令人头疼的是:在IE6下,左栏经 常会神奇消失!!!(比如将IE6的窗口高度拖小点)评论中还反馈在IE7下也存在不少问题(我测试后,发现在IE7正式版下没问题,评论中的 IE7可能是beta版)。另外在Chrome下表现也有点诡异,需要小小hack. 还有那繁琐的padding, margin, left, right计算,时刻需要一颗清晰的大脑,喝点小酒就彻底晕了……

技术层面:

  • 浮动 float
  • 负边距 negative margin
  • 相对定位 relative position
  • css hack


例子代码如下:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>holy grail layout</title>
</head>
<style type="text/css">
<!--
*{ margin:0; padding:01;}
.content_box{
	height:50px;
	padding:10px;
	background:#e1e1e1;
	border:1px dotted #ccc;
}
.bodyArea{ background:#f0f0f0;}

/*-- 关键部分代码 --*/

.bodyArea{ width:950px; margin:50px auto;}
.body_wrap{ padding-left:240px; marg-right:200px; zoom:1; }
.body_wrap:after{ content:"."; display:block; height:0; clear:both; overflow:hidden;}
.main{ float:left; width:100%;}
.side{ float:left;  position:relative; left:-240px;  width:230px; margin-left:-100%;}
.extra{ float:left; display:inline; position:relative; right:-200px; width:190px; margin-left:-190px;}


-->
</style>
<body>

<div class="bodyArea">
	<div class="body_wrap">
		<div class="main">
			<div class="content_box">main:510px;</div>
		</div>
		<div class="side">
			<div class="content_box">side:230px;</div>
		</div>
		<div class="extra">
			<div class="content_box">extra:190px;</div>
		</div>
	</div>
</div>
</body>
</html>

演示地址:http://www.jackness.org/lab/2011/grid_layout/example_holy_grail_layout.html

但是这种布局提出之后在ie6下面强差人意,各种诡异,各种bug,浏览器最大化缩小有bug,平常看也有bug…

接下来作者发布了改良版。

改良版地址:http://matthewjamestaylor.com/blog/ultimate-3-column-holy-grail-pixels.htm

可是结构上来看..太复杂了,嵌套太多的层。

结语:

这是一个很美妙的布局,但在IE6尚未退出历史舞台的当今,圣杯布局可能并不是我们真正要找的圣杯。

分类HTML + CSS
阅读 1,233
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS