三列等高

上次写了两列等高实然想了一下，三列是不是也可以等高的，这就有点费力了，也用了一些空的标签，但还好，基本上IE6-8,FF是没有问题的，浏览器有限没有做过多测试

 

html:

<div class="wap"> <div class="box"> <div class="left"> this is left content this is left content this is left content this is left content this is left content this is left content this is left content this is left content this is left content this is left con </div> <div class="center"> <div>centercentercent centercentercentjsdflsdjflsjdkfsjdljfsdk centercentercentcentercentercentcentercentercent centercentercent centercentercent centercentercent centercente</div> </div> <div class="right"> this is right content this is right content this is right content this is right content this is right content </div> </div> <div class="bdbg"> </div><!--为了做遮盖--> <div class="bdbg1"> </div><!--为了做遮盖--> </div>

 

.center里面的div实在不想加，但是会出现右padding无效具体的原因没有找出来，所以里里面就套了一个div,实在浪费

 

css:

*{ margin:0; padding:0;} .wap{ width:900px; position:relative;margin:0 auto; zoom:1; } .box{overflow:hidden; zoom:1;border-bottom:1px solid #f60; padding-bottom:10px; } .left,.right{ border:1px solid #f60; padding:10px 10px 10000px 10px; width:300px;float:left; overflow:hidden;} .left{margin: 0 10px -10000px 0;} .right{ float:right; margin: 0 0 -10000px 10px;} .center{ padding:10px 10px 10000px 10px; float:left; width:214px; margin: 0 0 -10000px 0;vertical-align:top; border:1px solid #f60; overflow:hidden; } .bdbg,.bdbg1{ width:10px; height:10px; position:absolute; bottom:-2px; background:#fff; zoom:1;} .bdbg{ left:322px;} .bdbg1{ right:322px;} .center div{ overflow:hid

 

 

大致意思是这样的，具体情况，具体调整了……