两列等高

最新推荐文章于 2022-08-20 19:55:08 发布

原创最新推荐文章于 2022-08-20 19:55:08 发布 · 835 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #float #border #html #css #div

CSS 专栏收录该内容

12 篇文章

订阅专栏

一般两列等高的情况，如果只是背景等高没有太大用处，这样也可以显示出边框

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 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 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 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 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 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 </div> <div class="right"> this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content this is right content </div> <div class="bdbg"> </div> </div> </div>

css:

*{ margin:0; padding:0;} .wap{ width:900px; border-bottom:1px solid #f60; position:relative;margin:0 auto; } .box{overflow:hidden; zoom:1; padding-bottom:10px; } .left,.right{ border:1px solid #f60; padding:10px 10px 10000px 10px; margin-bottom:-10000px; width:423px; float:left;} .right{ float:right;} .bdbg{ width:10px; height:10px; position:absolute; bottom:-2px; left:445px; background:#fff;}

这样就填补了只是背景等高的不足，只是多了标签，也不用图片