#rightbox
- » 绝对定位
- » 固定宽度
- » 背景是图片
已知问题
- »本侧栏的内容如果超出了中间栏的高度，就会超出 div，用页面的背景色填满新的未用区域。
- »小心那些过长的不可换行的链接、文本和图片。
- »改变该div的宽度时，必须同时改变背景图片的宽度。这个图片有一条很细的左边框，是图片的一部分。
- »请留意 IE5-Mac 及其右边定位元素的神秘的边距(margin)。
你好，欢迎到此作客。
希望你玩的愉快。请测试布局、改变文字大小、改变浏览器尺寸，体会其工作原理。下面就是你要想找的信息。
在本页的顶部，#header 元素有一个背景图片（其实我也很喜欢它）。下面的链接是一个无序列表，必要时可以优雅地换行。
你会在左右两边发现以绝对定位放置的侧栏，其背景色用到了不同的技术。其属性在各个侧栏中作了小结。
本页的所有内容，除了 #leftbox 和 #header之外，都包含在称为 #container的 div 中。现在所处的位置或者盒子，一般来说是我经常坐坐、聊聊的地方。再往下，就是布局的其余部分，两个浮动的分栏和另一个完美坐落于侧栏之间的div。
.left
- » 向左浮动
- » 宽度可略为改变
- » 加上边框会更好看些
- » 两个浮动栏都包含在同一个容器div内。
已知问题
- » 在 IE5.5 中必须为 #wrapper指定宽度，而在 IE6 中则不必，所以必须采用一个技巧。
- » IE 会双倍计算容器内紧靠浮动元素的边距(margins)，所以对于别的浏览器，必须指定不同的值，不管是左边的还是右边的浮动对象。
- » 如果为清除用的div 指定 margin 或 padding，则 IE/Mac 会出问题。
.right
- » 向右浮动
- » 宽度可略为改变 varied somewhat
- » 加上边框会更好看些
- » 浮动对象后面是一个 清除用的div。
好处
- » 由于两个 div 都是浮动的，如果其中一个较长一些，在IE中不会出现所谓的三个像素的文本误差。
- » Flies, flies, and more flies! Oh, and my lily pad as well.
- » Oops! How did that last line get in here?
#contents
- » 理论上，这应该是一个跟在 清除用div 之后的静态区块。
- » 实际上，为了让 IE6 能够显示，将它以相对方式定位。
- » 如果需要，它可以充满整个侧栏之间的宽度。
本页的尾栏位于#container div 之中。 尽管该布局没有采用全尺寸的（尾栏），但可以加上。只需简单地在#container div 之后放上另一个 div，至于其样式你可以随意指定。
关于本布局的技术细节，你可以在前一页找到。所有的 CSS 都放在文件的头部，相信你会在那里找到有用的提示。
好了各位，就这么多了。希望你过的愉快，但愿这里的技术和信息对你有用。
Ribbet!