一、同级元素两个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;