css实现未知高度div等高
未知高度的div要实现等高，相信这种情况我们在做项目的时候会比较常遇到。其实未知高度div等高布局的方法有挺多，可以用js方法，通过背景图来实现假的等高。这里介绍一种纯css的处理方法。不管是三列还是两列，或者更多列都可以用这个方法来解决。目前本人用过这个方法后感觉还是蛮不错的，最起码这种方法兼容各大浏览器。如果在ie6下遇到这种问题可以在#wrap里面加入zoom:1;来解决。我遇到这种需求都会用这种方法来解决，屡试不爽。现在就拿来分享给大家吧。
我先把代码贴上来吧，然后再分享我对这段代码的理解。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>CSS等高布局</title>
<style type=”text/css”>
*{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#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>
</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>
</div>
<div id=”right”>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
这是css实现未知高度div等高的实例图片
下面是我对这段代码的理解，首先left center right 这三个div外面是有一个id为wrap div元素包含的。#wrap的overflow：hidden，这个样式很重要。如果去掉的话，里面的三个div元素的高度会跟你设置的内边距一样高，如果你在里面加入了内容的话，还会加上内容的高度。#left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}相信很多朋友可能对这句很不理解，为什么设置大内外边距就能实现这种效果呢？我是这样去理解的。其实他跟上面的overflow：hidden是有很大联系的。我们把#wrap里面的三个div元素设置了正负内外边距，从而使内容的原点规为原点，即0 ，0其实现在三个div高度都是为0，我们看到的高度只是被内边距撑出来的高度。只是当我们输入的内容的高度小于这个内边距的时候我们是
不会看到的，因为已经被#wrap的overflow：hidden隐藏了。大家也可以测试一下，把overflow：hidden样式去掉，在浏览器上面明显可以看出来。他实际的高度是内容高度加上内边距的高度。
css实现三列布局
本文来自五指前端更多资料请移步 www.webtall

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。