首页  >  网站建设  >  前端网页  >  同级元素两个div怎么让他等高？

一、同级元素两个div显示效果如下

二、css文档

.wrap{
    overflow:hidden;
}
.lxxleft{
    width:30%;
    background:#09C;
}
.lxxright{
    width:70%;
    background:#C6C;
}
.lxxleft, .lxxright{
    float:left;
    word-break:break-all;
    padding-bottom:2050px;
    margin-bottom:-2000px;
}

三、html文档：div布局代码如下

<div class="wrap">
        <div class="lxxleft">这是左边的内容，这里的内容比较少。
可以让他们等高吗</div>
        <div class="lxxright">这是右边的内容，这里的内容很多。前方录博客－分享互联网营销、网站建设、电商运营、美工设计专业知识和系统课程、以及在相关学习、工作、创业过程中遇到的心态、习惯，思路思维，方法方案交流与分享！具体有以下内容：相关软件工具、资源素材分享及使用指导服务；还有互联网推广、PS使用、AI软件使用、网页设计、网页制作、网站搭建、 网店装修、淘宝美工、 淘宝开店、 微商、微信公众号二次开发、小程序、 html、css、javascript、php、sql语言、SEO优化、网赚知识等等！</div>
</div>

四、原理讲解：

在这里，我们设置了较大的padding-bottom值2000px，让元素变得很高，但实际上当left和right内容不同的时候，其实他们两的高度是不一样的，这时候设置他们父级wrap的overflow:hidden属性，并对元素设置margin-bottom:-2000px,可以让元素下面2000像素被隐藏了，剩下的减少2000像素的上面部分显示着，看起来，就是一样高的了。