Sha*_*ath 0 html javascript css stylesheet
我有以下html片段.我希望背景颜色为红色的div与高度为15.56 + 77.33 + 73.33的div的总高度相同
<body>
<!-- outer div -->
<div style="background-color:gray;">
<div style="background-color: black; float: left;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red; display: inline-block; height: inherit;">
Should be red!
</div>
</div>
<body>
设置display:flex为包装div(然后float不需要)
你试图设置height: inherit;它并没有用,因为你想height将DOM 设置为兄弟 DOM而不是parent
inherit关键字指定属性应从其父元素继承其值.
.outer{display:flex}<body>
<!-- outer div -->
<div style="background-color:gray;" class="outer">
<div style="background-color: black;">
<div>
<div>
<div style="height: 15.56px; background-color: blue;">Blue</div>
<div style="height: 77.33px; background-color: green;">Green</div>
<div style="height: 73.33px; background-color: orange;">Orange</div>
</div>
</div>
</div>
<div style="background-color: red;">
Should be red!
</div>
</div>
<body>