推荐：网页中三列自适应高度布局的实现

来源：网页教学网 作者： 出处：巧巧读书 2006-10-27 进入讨论组

• 关 键 词：
• google
• opera
• html
• css
• 补丁

下一页 1 2 

三列的布局，一个固定宽度的左列是导航列，右列可以放Google Ads 或者 Flickr的像册，自适应宽度的中间列是主要内容。

特点:

• 有一个自适应宽度的中间列与固定的宽度左右列。
• 中间列的主要内容首先出现在网页中。
• 可以允许任一个列的内容为最高。
• 非常简单的CSS和最少的Hacks。

Step 1: 搭建结构

先从header, footer, and container开始.

<divid="header"></div>

<divid="container"></div>

<divid="footer"></div>

给Container 一个左右方向的内补丁,其宽度相当于左右列的宽度.

#container{

padding-left:200px;/*LCwidth*/

padding-right:150px;/*RCwidth*/

}

现在的布局如下图:

Step 2: 增加列

在已有布局基础上加再左、中、右列

<divid="header"></div>

<divid="container">

<divid="center"class="column"></div>

<divid="left"class="column"></div>

<divid="right"class="column"></div>

</div>

<divid="footer"></div>

然后加宽度和浮动，底部的Footer须清除浮动，使其保持在最下面。.

#container.column{

float:left;

}

#center{

width:100%;

}

#left{

width:200px;/*LCwidth*/

}

#right{

width:150px;/*RCwidth*/

}

#footer{

clear:both;

}

现在的代码运行的结果如下图，由于#container的左右填充和#center100%的缘故，左列和右列被挤到#center的下面，这不是我们想要的结果。

Step 3: 给左栏定位

采取二步给这个左栏定位，首先给左栏一个-100%的左边界，相当于中间栏的宽度，此时，左栏和中间栏重合，共享它的左边缘，如下图。

#left{

width:200px;/*LCwidth*/

margin-left:-100%;

}

然后采用相对定位的办法将左栏定位到距右边200PX的地方(也就是左栏的宽度)。

#container.columns{

float:left;

position:relative;

}

#left{

width:200px;/*LCwidth*/

margin-left:-100%;

right:200px;/*LCwidth*/

}

现在左栏的位置正好是#container的左内补丁。

Step 4: 给右栏定位

将右栏定位于#container的右内补丁位置，只要设定右栏的负右边界就可。

#right{

width:150px;/*RCwidth*/

margin-right:-150px;/*RCwidth*/

}

现在布局中的空白区域已消失。

转 载:http://www.qqread.com/web-special/x255400.html进入讨论组讨论。

下一页 1 2 

【收藏此文】【大 中 小】【打印】【关闭】

较早的文章：像表格table一样轻松布局div层

较新的文章：控制电脑关机或者重新启动的JS代码