css实现三栏布局并居中显示

jickcai · 发表于 2013-2-7 22:29:14

使用绝对定位实现三栏布局并居中显示:

<!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>

		自动登录	找回密码
密码			立即注册