如何用css实现等高布局。

有时候为了让网页实现美观，在不知道高度的情况下，我们要用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,其实并不简单。

总结

以上是生活随笔为你收集整理的如何用css实现等高布局。的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。