下面给出一个实际的列子,附详细说明。
首先可以将下列代码复制到html文件中运行一下,在mozilla、opera和ie浏览其中,均可达到居中且自适应高度的要求。
body
{
background:#999;
text-align:center;
color:#333;
font-family:Arial, Verdana, Sans-serif;
}
#header
{
width:776px;
margin-left:auto;
margin-right:auto;
padding:0px;
background:#eee;
height:60px;
text-align:center;
}
#container
{
margin-left:auto;
margin-right:auto;
width:776px;
}
#mainbg
{
width:776px;
padding: 0px;
background:#60A179;
float:left;
}
#right
{
float:right;
margin:2px 0px 2px 0px;
padding:0px;
width:574px;
background:#ccd2de;
text-align:left;
}
#left
{
float:left;
margin:2px 2px 0px 0px;
padding:0px;
background:#f2f3f7;
width:200px;
text-align:left;
}
#footer
{
clear:both;
width:776px;
margin-right:auto;
margin-left:auto;
padding:0px;
background:#eee;
height:60px;
}
.text
{
margin:0px;
padding:20px;
}
header
查看更多关于典型的三行两列居中高度自适应div+css布局_html/css_WEB-ITnose的详细内容...