利用层的table-row、table-cell属性进展页面布局

利用层的table-row、table-cell属性进行页面布局

利用层的table-row、table-cell属性可以进行等高、宽度自适应页面布局，这是参看了《我所知道的几种display:table-cell的应用》及《基于display:table的CSS布局》两篇文章给我的启发。

?

一、HTML代码：

?

<div id="wrapper">  <div id="header"></div><div id="main">         <div id="nav">     你一定也有过这种感觉的。当你心事重重，渴望找一个人聊一聊的时候，那个可以聊的人来了，可是你们却并没有聊什么。当然，聊是聊了，可是他聊他的，你也试着开始聊你的，只是到后来，你放弃了……那么，最后的办法就是静下来，啃啮自己的寂寞。或者反过来说，让寂寞来吞噬你。------罗兰《寂寞的感觉》           <p>&nbsp;</p>          <p>&nbsp;</p>        </div>        <div id="content">          奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>          <p>&nbsp;</p>        </div>  </div>  <div id="footer">此处显示  id "footer" 的内容</div></div>

?

?

二、CSS代码：

?

<style type="text/css">/** ================= 页面布局CSS参数设置 ======================= *//*  @编写：hegz *//*  @日期：2010/11/10 */body,td,th {font-family: Verdana, Geneva, sans-serif;font-size: 12px;color: #333;/*text-align: center;*/margin: 0;padding: 0;}/* 包裹容器 */#wrapper{width: 780px;               /* 整体页面宽度可按需改变，可设为百分比参数 */margin: 0 auto;             /* 页面居中设置 */border: 1px solid #B7B7B7;}/* 页头 */#header {background-image: url(logo2.png);background-repeat: no-repeat;height: 230px;background-color: #d3dff2;}/* 页中 */#main {display: table-row;     /* 宽度自适应设置 *//*border-collapse: collapse;*/    overflow: hidden;       /* 宽度自适应设置 */width: 100%;            /* 宽度自适应设置 */background-color: #FFF;border-top-width: 1px;border-bottom-width: 1px;border-top-style: solid;border-bottom-style: solid;border-top-color: #B7B7B7;border-bottom-color: #B7B7B7;}/* 导航栏区块 */#nav {display: table-cell;       /* 宽度自适应设置 */*display: inline-block;    /* 宽度自适应设置 */    *float:left;               /* 宽度自适应设置 */width: 180px;              /* 导航栏定宽设置 */padding: 10px;background-color: #FFE6E6;text-align: left;    margin-bottom: -2000px;    /* 等高设置，注意：一定要放在float、width、padding的后面 */*padding-bottom: 2000px    /* 等高设置，注意：一定要放在float、width、padding的后面 */}/* 内容显示区块 */#content {display: table-cell;       /* 宽度自适应设置 */*display: inline-block;    /* 宽度自适应设置 */text-align: left;padding: 10px;}/* 页脚 */#footer{text-align: center;padding: 10px;background-color: #d3dff2;}</style>

?

三、效果图：?

?

?

?