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

  三列的布局，一个固定宽度的左列是导航列，右列可以放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 2: 增加列

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

以下是引用片段： <div id="header"></div> <div id="container"> <div id="center" class="column"></div> <div id="left" class="column"></div> <div id="right" class="column"></div> </div> <div id="footer"></div>

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

以下是引用片段： 　　#container .column { 　　float: left; 　　} 　　#center { 　　width: 100%; 　　} 　　#left { 　　width: 200px; /* LC width */ 　　} 　　#right { 　　width: 150px; /* RC width */ 　　} 　　#footer { 　　clear: both; 　　}

共5页: 上一页 1 [2] [3] [4] [5] 下一页