ifireyy

FROM：Understanding “Any order columns”

我们在这里要解决的是：一个3栏的页面结构，源代码是这样的结构— main, nav, 和 links — 我们要做的是通过css的定义来使它以任意的排列结构显示出来.

我们的代码包含3个 divs, 每个都有相应的 id 和内容.

[...content ...]
[...content...]
[...content...]

首先我们要做的是给它们定义相应的宽度和向左(left)的浮动(float)值, 以及清除一个windows下IE的元素浮动BUG.

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    }

好的. 这个是现在的3栏结构, 当然如果我们需要改变3栏结构的显示次序，我们可能需要修改网页源代码的结构。

解决办法

首先, 我们尝试互换 main 和 nav 分栏的位置，这样的话 nav 就在左边, main 就在中间了。 很明显的，我们给 main 分栏一个 left-margin of 20% 让它空出一块地方(暂且给它个命名：地盘A)给 nav 分栏，接着通过一个负的left-margin of -70% 把 nav 分栏移动到我们的目的地. 搬家成功.

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    margin-left:-70%;
    }
#links {
    float:left;
    width:20%;
    }

接着, 我们试一下让 nav 和 links 分栏调换位置. 当然， main 分栏就不需要怎么动了，保持它的 left-margin of 20%. 我们去除 nav 分栏的负 left-margin ，同时用一个负的 left-margin of -90% 把 links 分栏移动到(地盘A).

#main {
    display:inline; /* Fixes IE Double Margin Float Bug */ 
    float:left;
    width:50%;
    margin-left:20%;
    }
#nav {
    float:left;
    width:20%;
    }
#links {
    float:left;
    width:20%;
    margin-left:-90%;
    }

并不华丽的演示。你可以动手尝试一下，真的非常简单。

其他相关页面

• Any order columns
• Multi-unit any order columns
• Equal height columns
• In Search of the Holy Grail