下面是另一个div图片和代码里面的div。因为会有文本和图像的父div。红色div将是父div的最后一个元素。
<div style="width: 200px;身高:150 px;边框:1px纯黑色;" > <div style="width: 100%;高度:50 px;边框:1px纯红色;" > < / div > < / div >
当前回答
<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>
其他回答
如果你知道父母的身高，下面是避免绝对divs和table的方法:
<div class="parent">
<div class="child"> <a href="#">Home</a>
</div>
</div>
CSS:
.parent {
line-height:80px;
border: 1px solid black;
}
.child {
line-height:normal;
display: inline-block;
vertical-align:bottom;
border: 1px solid red;
}
JsFiddle:
例子
你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;父元素显示:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给予子元素display:inline-block;它们会自动神奇地流向父节点的底部。
<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>
使外部div位置="相对"和内部div位置="绝对"，并设置它的底部="0"。
这是另一个纯CSS技巧，它不影响元素流。
#{母公司 最小高度:100 vh;/*根据需要设置高度*/ 显示:flex; flex-direction:列; 背景:灰色; ｝ .child { margin-top:汽车; 背景:绿色; ｝ < div id = "父" > <h1>定位与边缘</h1> < div class = "孩子" > 内容到底 < / div > < / div >
