Как я могу отправить внутреннее <отделение> в нижнюю часть его родителя <отделение>?

Отделение в другом изображении отделения и коде ниже. Поскольку будет текст и изображения родительского отделения. И красное отделение будет последним элементом родительского отделения.

alt text

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>
164
задан Community 8 February 2017 в 14:20
поделиться

3 ответа

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>
-121--660840-

Это один из способов

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

Но поскольку внутренний див расположен абсолютно, вам всегда придется беспокоиться о другом содержимом во внешнем див, перекрывающем его (и вам всегда придется установить фиксированные высоты).

Если вы можете сделать это, лучше сделать этот внутренний объект DOM последним объектом DOM во внешнем DIV и установить для него значение "clear: both".

198
ответ дан 23 November 2019 в 21:12
поделиться

Сделайте внешнюю div положение = "относительную" и внутренний div положение = "абсолют" и установить его дна = "0 «.

76
ответ дан 23 November 2019 в 21:12
поделиться
<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>
0
ответ дан 23 November 2019 в 21:12
поделиться