利用层的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> </p>
<p> </p>
</div>
<div id="content">
奔波了一天，收到了无数的生日快乐，享受了电影见面会现场各种形式的祝福和礼物，以及场面宏大的生日快乐歌，感谢＜西风烈＞，感谢支持我的朋友们！现在机场举长寿面祝你们都永远幸福快乐！
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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>
三、效果图：