问题:- 如何使用“number-parent”类设置 div 的高度，等于使用“active-lg”的 div没有JS的类只使用css(不想设置px高度)
我创建了一个 JSFiddle， 链接 :- http://jsfiddle.net/thakv1/s4v6tLne/
如果链接不可访问， HTML :-
<!DOCTYPE html>
<html>
<head>
<title>Accordion Number Layout</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "active-lg">
<div class = "header">
<div class = "number-parent">
<div class = "number">1</div>
</div>
<h3>Header</h3>
</div>
<div class = "body">
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
</div>
</div>
</body>
</html>
CSS :-
.header{
border : 1px solid red;
height: 40px;
margin-left: 40px;
}
.body{
border : 1px solid green;
height: 260px ;
margin-left: 40px
}
.number-parent{
display : inline-block;
border: 1px solid blue;
position: absolute;
float: left;
margin-left: -42px;
}
.number{
width : 40px;
height: 40px;
border-radius: 50%;
text-align : center;
background-color:red;
}
h3{
display: inline;
}
最佳答案
设置最外层 div 的位置，在您的例子中是 active-lg:
.active-lg{
position: relative;
}
然后你可以为你的 .number-parent 使用 % 的高度
.number-parent {
display: inline-block;
border: 1px solid blue;
position: absolute;
float: left;
margin-left: -42px;
height:100%;
}
关于html - 如何在没有JS的情况下将 "number-parent"类div的高度设置为等于 "active-lg"类div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53752364/