快捷搜索:

典型的DIV+CSS三行二列居中高度自适应布局

若何使全部页面内容居中,若何使高度适应内容自动伸缩。这是进修CSS结构最常见的问题。下面就给出一个实际的例子,并具体解释。(本文的履历和是蓝色抱负论坛xpoint、guoshuang合营评论争论得出的。)

起起首按这里看实际运行效果,这个页面在mozilla、opera和IE浏览器中均可以实现居中和高度自适应。我们来阐发代码:

CSS:

body{

background:#999;

text-align:center;

color: #333;

font-family:arial,verdana,sans-serif;

}

#header{

width:776px;

margin-right: auto;

margin-left: auto;

padding: 0px;

background: #EEE;

height:60px;

text-align:left;

} #contain{

margin-right: auto;

margin-left: 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;}

HTML:

header

class="text">right

1

1

1

1

1

left

footer

运行效果:

首先我们定义body和顶部第一行#header,这里面的关键是body中的text-align:center;和header中的margin-right: auto;margin-left: auto;,经由过程这两句使得header居中。注:着实定义text-align:center;就已经在IE中实现居中,但在mozilla中无效,必要设置margin:auto;才可以实现mozilla中的居中。

接下来定义中心的两列#right和#left。为了使中心两列也居中,我们在它们外貌嵌套一个层#contain,并对contain设置margin:auto;,这样#right和#left就自然居中了。

留意中心两列定义的顺序,我们首先定义#right,经由过程float: right;让它浮在#contain层的最右边。然后再定义#left,经由过程float: left;让它浮动在#right层的左面。这和我们曩昔表格从左到右定义的顺序恰恰相反(更正:先左后右、照样先右后左都可以实现,根据自己必要设计)。

我们看到代码中在#contain和两列之间还嵌套了一个层#mainbg,这个层是做什么用的呢?这个层便是用来定义#contain的背景的。你肯定会问,为什么不直接在#contain中定义背景,而要多套一层呢?那是由于在#contain中直接定义的背景,在mozilla中将显示不出来,必须定义高度值才可以。假如定义了高度值,#right层就无法实现根据内容的自动伸缩。为了办理背景和高度问题,就必须增添这么一个#mainbg层。秘诀在于#mainbh这个层定义float: left;,由于float使层自动有宽和高的属性。(暂且这么理解:)

着末是定义底部的#footer层。这个定义的关键是:clear:both;,这一句话的感化是取消#footer层的浮动承袭。否则的话,你会看到#footer紧贴着#header显示,而不是在#right的下面。

主要的层定义完毕,这个结构就ok了。弥补一点:你看到我还定义了一个.text{margin:0px;padding:20px;},这个class的感化是使内容的外围有20px的空缺。为什么不直接在#right里定义margin或者padding呢,由于mozilla和IE对css盒模型的解释不同等,直接定义margin/padding会造成mozilla里结构变形。我一样平常采纳内部再套一层的做法来办理。

您可能还会对下面的文章感兴趣: