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

阳光穿透心脏的1/2处 2022-06-15 03:15 289阅读 0赞

**场景描述：有一个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 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关子元素相对于父元素固定定位

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

ゞ浴缸里的玫瑰/ 2023年06月25日 03:09/ 0 赞/ 64 阅读

相关 html 父元素自动获取高度,html – 使子div与自动高度父div一样高

我有一个包装元素,包含两个浮动元素contentArea和侧边栏. contentArea具有最多内容,因此确定包装元素的高度.我希望侧边栏也能触及包装div的底边.我怎么做.

Myth丶恋晨/ 2022年10月05日 13:52/ 0 赞/ 187 阅读

相关子元素margin-top为何会影响父元素？

问题如下一段很简单的代码： css如下： <style type="text/css"> { margin: 0px; padding: 0px; } .sh

╰半橙微兮°/ 2022年07月15日 01:37/ 0 赞/ 221 阅读

相关 css3父元素模糊不影响子元素

> 说一下css3父元素模糊不影响子元素的效果。在使用css3的filter属性设置背景模糊的时候，我们通常想到的做法是写如下的代码： <!DOCTYPE html>

ゞ浴缸里的玫瑰/ 2022年07月11日 05:43/ 0 赞/ 626 阅读

相关 jquery选择器获取父级元素、同级元素、子元素

一、获取父级元素 1、 parent(\[expr\]): 获取指定元素的所有父级元素 <div id="par_div"><a i

缺乏、安全感/ 2022年06月16日 14:46/ 1 赞/ 494 阅读

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

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

阳光穿透心脏的1/2处/ 2022年06月15日 03:15/ 0 赞/ 290 阅读

相关 html css样式子元素相对父级元素定位

废话不多说。父级元素样式设置： position:relative; 子元素样式： position: absolute; 这样就可以达到子

系统管理员/ 2022年05月23日 09:30/ 0 赞/ 321 阅读

相关布局：父元素适应子元素的高度

第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为floa

╰+哭是因爲堅強的太久メ/ 2022年05月20日 09:36/ 0 赞/ 258 阅读

相关 Vue怎么操作父元素、兄弟元素、子元素

<button @click = “getDom($event)”>点击</button> methods: { getDom(e) {

- 日理万妓/ 2021年09月24日 01:52/ 0 赞/ 1059 阅读

相关关于居中、子元素撑开父元素

1、实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流

灰太狼/ 2021年07月25日 01:26/ 0 赞/ 558 阅读