中间三行两列的典型高度自适应布�

如何将整个页面内容居中，如何自动缩放适应性强的内容。这是学习CSS布局最常见的问题。下面给出了一个实际例子，并进行详细说明。(本文的经验和总结由xpoint和蓝色理想论坛郭爽讨论。首先，点击这里查看实际运行效果。这个页面可以在mozilla、opera和IE浏览器中居中和高度自适应。我们来分析一下代码：

完整代码

html headstyle type=' text/CSS ' body { background : # 999；文本对齐：居中；color: # 333font-family:arial，verdana，sans-serif；} # header { width:776px右边距：自动；左边距left: autopadding: 0px背景： # EEE；高度：60 px；text-align : left；} #包含{ margin-right : auto；左边距left: auto宽度： 776 px；} # mainbg { width:776pxpadding: 0px背景技术# 60A179向左浮动：} # right { float: rightmargin: 2px 0px 2px 0pxpadding:0px宽度： 574 px；背景# ccd2detext-align : left；} #左{ float: leftmargin: 2px 2px 0px 0pxpadding: 0pxbackground: # F2F3F7宽度： 200 px；text-align : left；} #页脚{ clear:both宽度width:776px右边距：自动；左边距left: autopadding: 0px背景： # EEE；高度：60 px；}.文本{ margin:0pxpadding:20px}/style/header dydiv id=' header ' header/div div id=' contain ' div id=' main BG ' div id=' right ' div class=' text ' right P1/pp1/pp1/pp1/pp1/p/div/div div id=' text ' left/div/div/div id=' footer ' footer/div/body/html

代码分析

首先，我们定义正文和顶行#header。关键是正文中的文本对齐3360中心。表头右边距：自动；左边距left: auto有了这两句话，标题就居中了。注意：实际上定义了文本对齐：中心。在IE中已经居中，但在mozilla中无效，需要设置margin:auto在mozilla中实现中心化。接下来，定义中间的两列#右和#左。为了使中间两列居中，我们在它们外面嵌套一个层#contain，并将margin:auto设置为contain；以便#right和#left自然居中。注意中间两列的定义顺序，我们先定义#right，通过float: right让它浮动到#contain层的最右边。然后定义#left，向左传递float:让它浮动到#right层的左边。这与我们之前的表格中从左到右定义的顺序正好相反(更正：可以先左后右实现，也可以先右后左实现，可以根据自己的需要进行设计)。我们可以看到代码中#contain和两列之间还嵌套了一个层#mainbg。这一层是做什么用的？该层用于定义#contain的背景。你肯定会问，为什么不直接在#contain中定义背景，而是多设置一层呢？这是因为直接在#contain中定义的背景不会在mozilla中显示，必须定义高度值。如果定义了高度值，则#right图层不能根据内容自动缩放。为了解决背景和高度问题，有必要增加这样一个#mainbg层。诀窍在于层#mainbh定义了float: left因为float使图层自动具有宽属性和高属性。(暂时：)最后在底部定义#页脚层。这个定义的关键是：clear:both这句话的作用是取消#footer层的浮动继承。否则，您将看到#页脚显示在#页眉旁边，而不是#右下方。定义了主要图层后，布局就可以了。补充：可以看到我还定义了a. text { margin:0pxpadding:20px}，这个类的功能是让内容的外围有一个20px的空白。为什么不直接在#right中定义边距或填充呢，因为mozilla和IE对css box模型的解释不同，直接定义边距/填充会导致mozilla中的布局失真。我通常用在里面再放一层的方法来解决问题。