返回按顺序的边框布局 顶栏
这个分栏在源文件中首先出现,它包含在向左浮动的 div.float-wrap 中,并在其中向右浮动。 div.float-wrap有一个负边距(margin-left)使之向左靠,这样就使它的另一个(向左浮动的)子块, (div.left)好像出现在 div.outer的红色边框(border-left: 150px solid #fcc;)的上方。
除了左面分栏的内容多了一些以外,其他的完全一样。
这只是个临时的示例,如果时间允许,我会详细分解。 哦,还要多谢Douglas Livingstone, 他开发的漂亮的Douglas Livingstone正是这个方案的核心, 多谢了,Douglas!:-D
本栏在 div.float-wrap 中向左浮动, 而 div.float-wrap 的左边距为负值,直到 div.left的宽度。
这种布局牵一发而动全身,所以在算计这些栏目时非常辛苦,而将所有div的边框设为1px就大为有用。
随意填些文字。今天早上上班赶公共汽车,到站台的时候,汽车已经启动。于是我边追边喊:“师傅,等等我,师傅等等我呀!!……” 这时一乘客从车窗探出头来冲我说了一句:“悟空,你就别追了,八戒会驮你的!!”
交通事故目击证人 一位留学生在美国目睹了一起交通事故。警察事后问他事情发生经过。“one car come, one car go, two car peng peng, one car die.”他说。
本栏在 div.float-wrap 的外面向右浮动。
这种布局在各种浏览器中的效果应该是一样的: IE5.5/6, Op6/7 和 Mozilla 的 windows 版, 以及 Mozilla 1.5rc1, Safari, Omniweb4.5, IE5.23, Opera 6.03, and Camino 0.7 for Mac.
底栏