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

时间:2008-10-06 10:29:08  来源:第二电脑网上收集  作者:

  第二电脑网导读: 可以允许任一个列的内容为最高。 非常简单的CSS和最少的Hacks。  Step 1: 搭建结构  先从header, footer, and 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 1: Create the frame


推荐:网页中三列自适应高度布局的实现》由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Page/HTML/2008-10-06/1629.html

 1/6    1 2 3 4 5 6 下一页 尾页


关键字:

关于《推荐:网页中三列自适应高度布局的实现》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td