#leftbox {
position: absolute;
left: 10px;
width: 180px(150px?);
}
这个栏段的背景是利用 body 卷标设定的图片,以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等,高度为20px,这样可以减少图片重复的次数,加快演算上色的速度。
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制,需要给定一个以像素作单位的"宽度(width)"值。
测试用连结
#rightbox {
position: absolute;
right: 2%;
width: 30%;
}
这个栏段也能显示"body"的背景,但是因为"body"的背景
图片只在垂直方向重复,而且仅与中间栏段的左边界同宽,所以这边显示的是"body"的背景颜色(background-color)。
这个栏段的"宽度(width)"和右边界的区域是用百分比作单位,你想用其它单位也可以。
如果页面比 640px 还窄,中间和右边栏段使用的"pre"卷标会导致内容重叠。
测试用连结
返回 p.i.e.
#middlebox {
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
中间栏段有设定背景色,以便跟右边栏段作区分。
这个栏段也需要补白(padding)和边框(border),不过因为没有设定"宽度(width)"属性,并不会触发 IE5.x 的区块模块(box model)问题。
这个栏段也必须是最长的栏段,并且用你支持的最大分辨率(resolution)浏览时,仍要能够延伸到检视区(viewport)底端下方,否则"body"的背景就会在页尾(footer)下方出现。
这整个范例没有在任何栏段里宣告"高度(height)"属性,这是为了避掉一些浏览器表现"高度(height)"属性的独特方式。
因为这些条件的限制,这个版面非常适合那些总是有很长的中间栏段的网页,像是 weblogs。
页首、页尾和中间栏段是"固定的(static)"(或说"相对的(relative)"),而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定"高度(height)"。
在原始文件里,以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后,
因此这些 div 的"top"属性可以忽略。
这会让它们待在它们该在的垂直方向起点,也就是说它们是固定的(直接连在固定的页首下)。
所以如果页首因为额外的内容扩大,三个栏段都会往下调整,这样不是很棒吗?
Mozilla 中,因为垂直方向的舍入误差(rounding error),在某些分辨率里,页尾下方可能有 1px 的空隙,
这个范例描述得更详细。
Nav4 中没办法使用像"div#leftbox"这类语法,所以请用"#leftbox"来代替。我的写法只是为了要明确地表示。
致谢:再次感谢Philippe Wittenbergh
,因为他的帮忙,让这个范例更为完善。更感谢
Mark Howells
,因为他提供了最初的 body 背景点子。
Big John
e-mail
©positioniseverything
最后更新日期: September 6, 2002
Created August 24, 2002
繁体中文翻译:yyhuang
简体中文转换:
onestab
以下是填满栏段用的
Why don't cannibals eat clowns?
Answer: They taste funny.
What is the difference between a lousy golfer and a lousy skydiver?
Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!
Did you hear about the geneticist that tried to cross a potato and a chicken?
He wanted to produce a chicken that would definitely NOT cross the road, but instead,
got a bunch of potatoes that sat around pecking eachother's eyes out.
How many Psychiatrists does it take to change a light bulb?
Answer: Only one, but the bulb has to really want to change.
Why did the egg cross the road?
Answer: It had an inclination.