今天小编跟大家讲解下有关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;}效果如下图:
来源:爱蒂网