您现在的位置： 365建站网 > 365文章 > div+css三行+三列实现代码

div+css三行+三列实现代码

文章来源：365jz.com 点击数：349 更新时间：2009-05-17 23:06 参与评论

以下为引用的内容：
<!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>
<title>三行三列等高布局</title>
<style>
* html body
{
overflow: hidden;
}
* html #footer-wrapper
{
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* Same as body
background */
}
* html #left
{
left: 150px; /* RC width */
}
body
{
min-width: 630px; /* 2x (LC fullwidth + CC padding) + RC fullwidth */
}
#container
{
padding-left: 200px; /* LC fullwidth */
padding-right: 190px; /* RC fullwidth + CC padding */
overflow: hidden;
}
#container .column
{
float: left;
position: relative;
}
#center
{
background-color: red;
padding: 10px 20px; /* CC padding */
width: 100%;
}
#left
{
background-color: blue;
width: 180px; /* LC fullwidth - padding */
padding: 0 10px; /* LC padding */
right: 240px; /* LC fullwidth + CC padding */
margin-left: -98%;
}
#right
{
background-color:green;
width: 130px; /* RC width */
padding: 0 10px; /* RC padding */
margin-right: -190px; /* RC fullwidth + CC padding */
}
#footer
{
position: relative;
background-color:orange;
clear: both;
}
#header
{
background-color:orange;
}
</style>
</head>
<body>
<div id="header">aa</div>
<div id="container">
<div id="center" class="column">bb</div>
<div id="left" class="column">cc</div>
<div id="right" class="column">dd</div>
</div>
<div id="footer-wrapper">
<div id="footer">ee</div>
</div>
</body>
</html>