头闻号

吴江市信诚精细化工有限公司

氯化物

首页 > 新闻中心 > 科技常识:css实现内容不相同的左右两个div等高
科技常识:css实现内容不相同的左右两个div等高
发布时间:2023-02-01 10:33:52        浏览次数:4        返回列表

今天小编跟大家讲解下有关css实现内容不相同的左右两个div等高 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关css实现内容不相同的左右两个div等高 的相关资料,希望小伙伴们看了有所帮助。

问题提出

现在有两个div左右排列,但是两个div的内容不相同,如何设置两个div的css做到在两个div等高排列呢?下面是3种实现方法,觉得很有代表性,所以索性收藏起来。

方法一

通过父元素设置 overflow:hidden, div自己设置padding-bottom 和 margin-bottom来实现。

<div id="#warp"> <div> <br> <br> <br> left </div> <div>right</div></div>#wrap { overflow: hidden; width: 1000px; margin: 0 auto;}#left,#center { margin-bottom: -10000px; padding-bottom: 10000px;}#left { float: left; width: 250px; background: #00ffff;}#center { float: left; width: 500px; background: #ff0000;}

方法二

使用 table-cell

.left,.right { padding: 10px; display: table-cell; border: 1px solid #f40;}

方法三

父元素使用 display: box;

.wrap { display: -webkit-box;}.left,.right { padding: 10px; border: 1px solid #f40;}

效果如下图:

来源:爱蒂网