Question

我有以下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>

Image depicting how its appearing currently

Answer 1

设置display:flex以包装div（然后不需要float）

您尝试设置height: inherit;，但此操作无效，因为您想将height的DOM设置为sibling 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>

继承div高度

1 个答案: