Question

问题：-如何使用“ 数字-父母”类设置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;
}

Answer 1

设置最外面的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%;
}

Here is working example

Answer 2

您可以尝试使用height: inherit;更多信息here ：）

如何在不使用JS的情况下将“数字-父”类div的高度设置为等于“ active-lg”类div的高度

2 个答案: