场景描述:有一个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>
这样就可以解决问题了,希望对你有帮助,如果有更好的办法,希望您能提出来!谢谢