好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

典型的三行两列居中高度自适应div+css布局_html/css_WEB-ITnose

如何使整个页面内容居中,如何使高度自适应内容自动伸缩,这是学习CSS布局最常见的问题。

下面给出一个实际的列子,附详细说明。

首先可以将下列代码复制到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;

}

查看更多关于典型的三行两列居中高度自适应div+css布局_html/css_WEB-ITnose的详细内容...

  阅读:43次