分享用纯CSS实现三列DIV等高布局的方法
DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！
成都创新互联专业为企业提供东明网站建设、东明做网站、东明网站设计、东明网站制作等企业网站建设、网页设计与制作、东明企业网站模板建站服务，10年东明做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
现在我们来看看真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：
html代码：
-
-
left
left
left
left
left
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
center
right
right
right
css代码：
-
- body, p, ul { 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; }
-
-
-
-
-
- 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;
- }
-
-
-
-
-
left
left
left
left
left
