css兑现三栏布局并居中显示
日期：2014-05-17 浏览次数：20757 次
使用绝对定位实现三栏布局并居中显示:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css 禅意花园学习</title>
<style>
body{ text-align:center;}
#wrapper{ width:750px; margin:0 auto; text-align:left; position:relative;
}
#contentArea{ width:450px; position:absolute; top:0px; left:150px;}
#leftPanel{ width:150px; position:absolute;top:0px;left:0px;}
#rightPanel{ width:150px; position:absolute;top:0px; left:600px;}
#footer{display:none;}
</style>
</head>
<body>
<div id="wrapper">
?<div id="contentArea">
??? ?<p>(headers and text here)</p>
??? </div>
??? <div id="leftPanel">
??? ?<p>(links and various text items here)</p>
??? </div>
??? <div id="rightPanel">
??? ?<p>(links and various text items here)</p>
??? </div>
??? <div id="footer">
??? ?<p>(Copyright statement,links,etc.)</p>
??? </div>
</div>
</body>
</html>
注意:由于IE5浏览器的缺陷导致其不能将外边距为auto的元素剧中显示，
所以我们需要使用两个text-align属性辅助IE5下的定位。
?
使用浮动实现三栏布局并居中显示:
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css 禅意花园学习</title>
<style>
body{ text-align:center;}
#wrapper{ width:750px; margin:0 auto; text-align:left; position:relative;
}
#contentArea{ width:450px; float:left;}
#leftPanel{ width:150px; float:left;}
#rightPanel{ width:150px; float:left;}
#footer{ clear:both;}
</style>
</head>
<body>
<div id="wrapper">
?<div id="leftPanel">
??? ?<p>(left)</p>
??? </div>
??? <div id="contentArea">
??? ?<p>(headers and text here)</p>
??? </div>
??? <div id="rightPanel">
??? ?<p>(right)</p>
??? </div>
??? <div id="footer">
??? ?<p>(Copyright statement,links,etc.)</p>
??? </div>
</div>
</body>
</html>
