您现在的位置: 网页制作教程网 >> 网页设计 >> 网页布局排版 >> 文章正文

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

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:15:03

三列的布局,一个固定宽度的左列是导航列,右列可以放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 1: Create the frame

[1] [2] [3] [4] [5] [6] 下一页

我来说两句:

1分 2分 3分 4分 5分
姓名: *


* 请各位网友遵纪守法并注意语言文明。
网站简介 | 联系方式 | 意见建议 | 版权说明
Copyright © 2007 All rights reserved
滇ICP备06006992号