Css 将div与其容器底部对齐

我想这很简单，我需要将两个内部div（绿色和蓝色）与容器底部（红色）对齐。我不希望使用绝对定位，我需要它是ie6，7，8 ff chrome safari等兼容

<div style="border:1px solid red;">
    <div style="border:1px solid green; width:20px; height:20px; float:left;"></div>
    <div style="border:1px solid blue; width:20px; height:30px; float:left;"></div>
    <div style="clear:both;"></div>
</div>

---

为什么不能使用绝对定位？垂直对齐不起作用（表除外）。使容器的位置：相对。然后使用底部：0绝对定位内部div；应该很有魅力

由zoidberg编辑（我将更新答案）

---

我也不喜欢绝对定位，因为几乎总有一些附带损害，即意外的副作用。尤其是当您使用响应性设计时。

---

似乎还有另一种选择——沙袋技术。通过在CSS的标记中插入“helper”元素，我们可以将元素向下推到容器的底部。参见示例。

你可以作弊！假设您的div为20px高，将div放置在下一个容器的顶部并设置为

position: absolute;
top: -20px;

---

它在语义上可能不干净，但可以与响应性设计一起扩展

现代的方法是使用flexbox，添加

对齐项：flex end

关于这一内容：

<div class="Container">
  <div>one</div>
  <div>two</div>
</div>

我解决这个问题的方法是使用flexbox。通过使用flexbox来布局容器div的内容，您可以让flexbox自动将可用空间分配给您想要“粘到底”的项目上方的项目

例如，假设这是您的container div，其中包含一些其他块元素，蓝色框（第三个向下）是一个段落，紫色框（最后一个）是您希望“粘到底”的那个


通过使用flexbox设置此布局，可以设置
flex-grow:1仅在段落（蓝色框）上，如果它是唯一具有
flex grow的内容：1，它将被分配所有剩余空间，将其后面的元素按如下方式推到容器底部：


（为糟糕、快速和肮脏的图形表示歉意）
我来这里查看时，忘记了我已经知道了这个问题的答案-它非常简单：
display:flex
和
margin top:auto

您所需要做的就是为您的容器提供一个
显示屏
的
flex
，并在底部提供您想要的物品的
auto
：


.container{
显示器：flex；
}
.盒子{
页边顶部：自动；
}

ahh看，我希望绿色的宽度，因此蓝色的左侧是流动的……我忘了给整个容器增加宽度和高度。问题的实质在这里得到了很好的回答：值得一提的是，容器必须有：
position:relative
，子元素才能有绝对定位对我来说，它使用
flex-direction:column；证明内容：之间的空间。对我有用。非常感谢你！这对我来说比绝对定位更有效，绝对定位与引导相结合时会产生一些非常奇怪的副作用。@joanlofe，这很有效！，但别忘了
display:flex当然，在容器中，只有当您希望将所有子元素与容器底部对齐，而不仅仅是（比如）最后一个元素时，这才起作用。同样，这也适用于
margin top:auto应用于最后一个元素。别忘了设置弹性方向：列；对于容器，默认为row，它将尝试水平挤压彼此相邻的元素。
position: absolute;
top: -20px;

<div class="Container">
  <div>one</div>
  <div>two</div>
</div>

.Container {
  display: flex;
  align-items: flex-end;
}