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

时间:2006-10-23 11:27:35  来源:中国站长资讯网  作者:佚名
三列的布局，一个固定宽度的左列是导航列，右列可以放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

文章评论

共有 位CH网友发表了评论 查看完整内容

特别推荐

最新信息