垂直三栏布局拥有相同高度的方法__div+css

垂直三栏布局拥有相同高度的方法

时间： 2007-09-27 00:50:27　阅读次数：6229

第 1 页垂直三栏布局拥有相同高度的方法[1]

第 2 页垂直三栏布局拥有相同高度的方法[2]

第 3 页垂直三栏布局拥有相同高度的方法[3]

效果测试代码

<!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=gb2312" />
<title>css</title>
<style type="text/css">
<!--
body{
  margin:0 100px;
  padding:0 200px 0 150px;
}
#container{
  background-color:#0ff;
  float:left;
  width:100%;    
  border-left:150px solid #0f0;
  border-right:200px solid #f00;
  margin-left:-150px;
  margin-right:-200px;
  display:inline; /* So IE plays nice */
}
#leftRail{
  float:left;
  width:150px;
  margin-left:-150px;
  position:relative;
}
#center{
  float:left;
  width:100%;
  margin-right:-100%;
}
#rightRail{
  float:right;
  width:200px;
  margin-right:-200px;
  position:relative;
}

-->
</style>
</head>

<body>
<div id="container">
  <div id="center">Center Column Content</div>
  <div id="leftRail">Left<br /> Sidebar</div>
  <div id="rightRail">Right Sidebar</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行