先从header, footer, and container开始.
给Container 一个左右方向的内补丁,其宽度相当于左右列的宽度.
三列的布局，一个固定宽度的左列是导航列，右列可以放Google Ads 或者 Flickr的像册，自适应宽度的中间列是主要内容。
特点:
- 有一个自适应宽度的中间列与固定的宽度左右列。
- 中间列的主要内容首先出现在网页中。
- 可以允许任一个列的内容为最高。
- 非常简单的CSS和最少的Hacks。
Step 1: 搭建结构
先从header, footer, and container开始.
以下是引用片段：
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div> |
给Container 一个左右方向的内补丁,其宽度相当于左右列的宽度.
|
以下是引用片段：
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
} |
现在的布局如下图:
Step 3: 给左栏定位
采取二步给这个左栏定位，首先给左栏一个-100%的左边界，相当于中间栏的宽度，此时，左栏和中间栏重合，共享它的左边缘，如下图。
以下是引用片段：
#left {
width: 200px; /* LC width */
margin-left: -100%;
} |
然后采用相对定位的办法将左栏定位到距右边200PX的地方(也就是左栏的宽度)。
以下是引用片段：
#container .columns {
float: left;
position: relative;
}
#left {
width: 200px; /* LC width */
margin-left: -100%;
right: 200px; /* LC width */
} |
现在左栏的位置正好是#container的左内补丁。
Step 4: 给右栏定位
将右栏定位于#container的右内补丁位置，只要设定右栏的负右边界就可。
以下是引用片段：
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
} |
现在布局中的空白区域已消失。
Step 5:最后的完善
至此，布局已基本完成，但如果浏览器的最小尺寸比中心宽度小，那么左列将变的很小，所以要设定个最小宽度，可惜IE现在还不支持。800x600没问题
以下是引用片段：
body {
min-width: 550px; /* 2x LC width + RC width */
} |
第四步完成的代码在IE里左栏会消失，现在要做的是把左栏定到它正确的位置上去。
以下是引用片段：
* html #left {
left: 150px; /* RC width */
} |
内容的边距
我们需要给内容一个内补丁(10PX)，否则的话，文本都顶着边。
列的总宽度等于(padding+width)。
以下是引用片段：
#left {
width: 180px; /* LC fullwidth - padding */
padding: 0 10px;
right: 200px; /* LC fullwidth */
margin-left: -100%;
} |
对IE5.x,应该用个hacks
以下是引用片段：
body {
min-width: 630px; /* 2x (LC fullwidth +
CC padding) + RC fullwidth */
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
#center {
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left {
width: 180px; /* LC width */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -100%;
}
#right {
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer {
clear: both;
}
/*** IE Fix ***/
* html #left {
left: 150px; /* RC fullwidth */
} |
当前位置：>
网络学院
> 阅读新闻 