Наследование высоты div - PullRequest
Новая
       10

Наследование высоты div

0 голосов
/ 12 ноября 2018

У меня есть следующий фрагмент HTML. Я хочу, чтобы div с красным цветом фона получал ту же высоту, что и сумма div с высотой 15,56 + 77,33 + 73,33 

<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>

Изображение, показывающее, как оно выглядит в настоящее время

1 Ответ

0 голосов
/ 12 ноября 2018

Установите 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>
...