下面是另一个div图片和代码里面的div。因为会有文本和图像的父div。红色div将是父div的最后一个元素。
<div style="width: 200px;身高:150 px;边框:1px纯黑色;" > <div style="width: 100%;高度:50 px;边框:1px纯红色;" > < / div > < / div >
当前回答
注意:这绝不是最好的方法!
情境: 我不得不做同样的事情，只是我不能添加任何额外的divs，因此我被困在我所拥有的，而不是删除innerHTML和创建另一个通过javascript几乎像2渲染我需要在底部的内容(动画栏)。
解决方案: 考虑到我当时有多累，它似乎正常，甚至想这样一个方法，然而，我知道我有一个父DOM元素，酒吧的高度是从。
而不是打乱javascript进一步我使用(不总是好主意)CSS回答!：）
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
是的，这是正确的，而不是定位DOM，我把它的父母颠倒在css。
对于我的场景，它将工作!可能其他人也一样!没有火焰!：）
其他回答
你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;父元素显示:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给予子元素display:inline-block;它们会自动神奇地流向父节点的底部。
你可能不想要绝对定位，因为它破坏了回流:在某些情况下，更好的解决方案是使祖父元素display:table;父元素显示:table-cell;vertical-align:bottom;。完成此操作后，您应该能够给予子元素display:inline-block;它们会自动神奇地流向父节点的底部。
<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>
如果你知道父母的身高，下面是避免绝对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:
例子
使外部div位置="相对"和内部div位置="绝对"，并设置它的底部="0"。
灵活的方式。
.parent { 显示:flex; flex-direction:列; justify-content:之间的空间; ｝ /*不需要，只是为了可视化*/ .parent { 身高:500 px; 边框:1px纯黑色; ｝ .parent div { 边框:1px纯红色; ｝ < div class = "父" > <div>图片，文本，按钮哦天哪!< / div > < div > < / div底部> < / div >
编辑:
来源- Flexbox指南
浏览器支持flexbox - Caniuse
