Css 如何发送内部邮件<；部门>；位于其父级的底部<；部门>；？

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

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

---

设置外部div

位置=“相对”

和内部div

位置=“绝对”

并将其设置为

bottom=“0”

这是一种方法

但是因为内部div是绝对定位的，所以您总是需要担心外部div中与它重叠的其他内容（并且您总是需要设置固定的高度）

---

如果可以，最好将内部div设置为外部div中的最后一个DOM对象，并将其设置为“clear:both”。

您可能不需要绝对定位，因为它会破坏回流：在某些情况下，更好的解决方案是使祖父母元素

显示：table和父元素
显示：表格单元格；垂直对齐：底部对齐。完成此操作后，您应该能够为子元素
display:inline块并且它们将自动流向父级的底部。
注意：这绝不是最好的方法

情况：
我不得不做同样的事情，只是我不能添加任何额外的div，因此我坚持使用我所拥有的，而不是删除innerHTML并通过javascript创建另一个，就像我需要的2个渲染一样，将内容放在底部（动画条）

解决方案：
考虑到当时我有多累，甚至想到这样一种方法似乎都很正常，但是我知道我有一个父DOM元素，它是条的高度的起点

我没有进一步使用javascript，而是使用了一个（并不总是好主意）CSS答案！）

是的，这是正确的，我没有定位DOM，而是在css中将它的父对象颠倒过来

对于我的场景，它会起作用！可能对其他人也是如此！没有火焰！：）
 如果您知道父级的高度，以下是避免绝对div和table的方法：

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

JsFiddle：

一种flexbox方式

HTML:


编辑：

来源-

flexbox的浏览器支持-
这里是另一个纯CSS技巧，它不会影响元素流


#父级{
最小高度：100vh；/*根据需要设置高度*/
显示器：flex；
弯曲方向：立柱；
背景：灰色；
}
.孩子{
页边顶部：自动；
背景：绿色；
}

带余量定位
知足常乐
那么，父div中的代码是否逻辑上位于子div之上？是否动态添加图像和文本？具体的问题是什么？谢谢你的解释和IE黑客（如果我没有错的话，你添加了**宽度：100%用于IE黑客）。不，宽度：100%在你的原稿中-我没有添加它。我试图加粗我更改的部分，但标记不适用于代码块：-P:）实际上我无法理解我们是如何用符号黑客IE的，这就是为什么我认为它是IE黑客：）请记住，如果父容器是浮动的，这种方法将不起作用。是的，这是有效的，但绝对定位打破了“自然布局”。内部div的高度不会包含在父级的高度中，并且随着外部div的变窄，您可能会看到与外部div中的其他内容重叠。这可能不是最好的方法，但这是非常棒、非常有创意的方法。今天，我自己已经为这个问题绞尽脑汁了一段时间，我的主要症结：没有设定的高度，必须是完全流动的（没有足够的字符来解释为什么显示：桌子不工作）。这一切都处理得很好；发生这种情况时，div中的图像也会翻转，所以我只是使用这些元素上的类来翻转它们。看起来和它应该的完全一样，没有设定的高度。有点老套，但有时候没有更好的选择。做得好！天哪，我的[编程]生涯你都去哪了！；）我喜欢这是如此简单，不会干扰定位，而且似乎在所有浏览器中都能正常工作：。这应该是现代编程的解决方案和公认的答案。Flexbox现在通常是“简单的方式”，并且具有（几乎）强大的浏览器支持和文档。将caniuse链接添加到答案中。如果不想在父div上设置高度，那么该链接非常棒！非常感谢。这是对梅格里特最好的回答！另一个flex解决方案将我的所有内容移出了位置，这一个将您要放置在底部的对象与其他对象隔离开来。伟大的解决方案！明亮的我将其与
#parent:last child
相结合，以实现更好的自动化（而不是
.child
）。这避免了给孩子一个类名或ID，CSS将始终应用于最后一个孩子。
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}