您的位置：首页 > Web前端 > CSS

CSS等高布局,3div自适应最高的高度

2013-06-04 12:30 429 查看

<!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">
*{  margin:0;  padding:0;  }
#wrap{   width:1000px;  margin:0 auto; overflow:hidden;  zoom:1;/* for ie6 */ }
#left,#center,#right{  margin-bottom:-10000px;  padding-bottom:10000px;  }
#left{  float:left;  width:250px;  background:#00FFFF;  }
#center{  float:left;  width:500px;  background:#FF0000;  }
#right{  float:right;  width:250px;  background:#00FF00;  }
</style>
</head>
<body>
<div id="wrap">
<div id="left">
<p>left</p> <p>left</p> <p>left</p> <p>left</p> <p>left</p>
</div>
<div id="center">
<p>center</p> <p>center</p> <p>center</p>
　　　　<p>center</p> <p>center</p> <p>center</p>
　　　　<p>center</p> <p>center</p> <p>center</p>
　　　　<p>center</p> <p>center</p> <p>center</p>
　　　　 <p>center</p> <p>center</p> <p>center</p>
　　　　<p>center</p> <p>center</p> <p>center</p> <p>center</p>
　　　　 <p>center</p>
</div>
<div id="right">
<p>right</p> <p>right</p> <p>right</p>
</div>

</div>
</body> </html>

子div: margin-bottom:-1000px; padding-bottom:1000px;

父div： overflow:hidden; zoom:1;

子div padding-bottom:1000px; 把自己的盒子向下推开变高了；margin-bottom:-1000px; 让父div可以向上收缩到内容实体的高度，含内容实体高度最高的子div把父div的收缩挡住了，所以看上去3个div高度相等。其实空白的高度都是padding,是可以布局内容的padding,因为设置了负外边距

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航