如何用css实现"等高布局"。

2013-08-27 14:13 龙恩0707 阅读(462) 评论(0) 编辑收藏举报

有时候为了让网页实现美观，在不知道高度的情况下，我们要用css实现等高布局效果，传统的方法，
我们可以用javascript实现，但是由于需求决定或者其他的情况下，我们只能用css实现，其方法主要是采用
“隐藏容器溢出”、"正内补丁"和"负外补丁"结合的方法实现的.

代码如下：

<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>
　　　　……（20个或更多个）
　　　　<p>center</p>
　　</div>
　　<div id="right">
　　　　<p>right</p>
　　　　<p>right</p>
　　　　<p>right</p>
　　</div>
</div>

css样式如下：
<style>
* {margin:0;padding:0;}
#wrap { width:1000px; margin:0 auto; overflow:hidden;}
　　#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>

其中的 10000px 可以修改为其他值，但不能小于最高列的高度。经测试，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。方法很简单吧。从这里可以看出：看似简单的 CSS,其实并不简单。