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

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

二、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像素的上面部分显示着,看起来,就是一样高的了。

 


 

分享创造价值

学习成就梦想

我是前方录

微信/QQ:34419369

加我好友,每天都有不一样的分享!

学习更多网站知识,请加QQ群:632528856

Leave a Reply

电子邮件地址不会被公开。 必填项已用*标注