如何发送内部< div>到其父级< div&gt ;?的底部 [英] How can I send an inner <div> to the bottom of its parent <div>?

问题描述

div在另一个div图片和代码下面。因为会有父div的文本和图像。红色div将是父div的最后一个元素。

The div inside another div picture and code below. Because there will be text and images of the parent div. And red div will be the last element of the parent div.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

推荐答案

这是一种方法

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

但是因为内部div是绝对定位的，你总是要担心其他内容外部div重叠它（和你总是必须设置固定的高度）。

But because the inner div is positioned absolutely, you'll always have to worry about other content in the outer div overlapping it (and you'll always have to set fixed heights).

如果你能做到这一点，最好使内部div最后一个DOM对象你的外部div，并设置为clear：both。

If you can do it, it's better to make that inner div the last DOM object in your outer div and have it set to "clear: both".

这篇关于如何发送内部< div>到其父级< div&gt ;?的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！