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

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

作者:龙犊整理

来源:天极

热度:

2006-10-23 13:15:03

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;
　　}

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

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

我来说两句：

查看评论