将div对齐到容器的底部

Question

我认为这很简单,我需要将内部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>

我尝试过使用vertical-align但找不到简单的解决方案.

谢谢你的帮助,p.

编辑这里是我对abs pos解决方案的尝试:

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

Answer 1

你为什么不能使用绝对定位？垂直对齐不起作用(表除外).让你的容器的位置:相对.然后使用bottom绝对定位内部div:0; 应该像魅力一样工作.

编辑zoidberg(我将更新答案)

<div style="position:relative; border: 1px solid red;width: 40px; height: 40px;">
   <div style="border:1px solid green;position: absolute; bottom: 0; left: 0; width: 20px; height: 20px;"></div>
   <div style="border:1px solid blue;position: absolute; bottom: 0; left: 20px; width: 20px height: 20px;"></div>
</div>

Answer 2

现代的方法是使用flexbox,添加align-items: flex-end;容器.

有了这个内容:

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

使用这种风格:

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

https://codepen.io/rds/pen/gGMBbg

Answer 3

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

例如，假设这是您的容器 div，其中包含一些其他块元素，并且蓝色框（向下的第三个）是一个段落，而紫色框（最后一个）是您想要“粘在底部”的那个”。

通过使用 flexbox 设置此布局，您可以flex-grow: 1;仅在段落（蓝色框）上进行设置，如果它是唯一的flex-grow: 1;，则将分配所有剩余空间，将其后面的元素推到底部像这样的容器：

（为糟糕的、快速和肮脏的图形道歉）

Answer 4

我来这里寻找，忘记了我已经知道这个问题的答案 - 而且它非常简单：display: flex和margin-top: auto。

您需要做的就是为您的容器指定 ，display并将flex您想要在底部放置的项目的上边距指定为auto：

.container {
  display: flex;
}

.box {
  margin-top: auto;
}

<div class="container" style="border:1px solid red; height: 150px;">
    <div class="box" style="border:1px solid green; width:20px; height:20px;"></div>
    <div class="box" style="border:1px solid blue; width:20px; height:30px;"></div>
</div>

也不需要漂浮物或清除物。