html实现子元素与父元素等高

来源：互联网发布：淘宝手机店铺怎么装修编辑：程序博客网时间：2024/06/08 20:16

场景描述：有一个div元素，其中有两个display为inline-block的div，其中div1的height为200，问怎么能实现div2的height可以跟父元素的height相同！即div1.height = div.height。

解决方案：

<!DOCTYPE html><html><head><meta charset="{CHARSET}"><title>animation test</title><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><style type="text/css">.box-con{width: 1200px;}.box{background-color: #f2f2f2;width: 246px;height: 54px;display: inline-block;}.style{position: absolute;top: 1px;left: 1px;display: block;width: 246px;height: 54px;border: 1px solid #80cfcb;transition: left .3s ease-out,top .3s ease-out;}</style></head><body><div class="box-con"><div class="style"></div><div class="box"></div><div class="box"></div><div class="box"></div><br /><div class="box"></div><div class="box"></div><div class="box"></div></div></body></html>

这样就可以解决问题了，希望对你有帮助，如果有更好的办法，希望您能提出来！谢谢

阅读全文

0 0