垂直对齐元素到底部

Question

我有几个要均衡的要素。 为此，我使用了一个读取最大高度并将其设置为所有这些元素的基本函数。

在每个元素上，我都有几个内部元素。 我要垂直对齐底部的内部元素中的最后一个。

-------MainElement------
|  _________________   |
| |                 |  |
| | First Elem      |  |
| |_________________|  |
|  _________________   |
| |                 |  |
| | Second Elem     |  |
| |_________________|  |
|                      |
|                      |
|                      |
|                      |
|  _________________   |
| |       Last      |  |
| | Vertical Bottom |  |
| |_________________|  |
|-----------------------

第一个元素和第二个元素的高度可能取决于其内容（文本和图像），但是最后一个元素将始终固定

如果我尝试使用绝对位置垂直对齐最后一个元素，则这会破坏我的equalize函数 ， 该函数将inline height css属性设置为该元素。

-------MainElement------
|  _________________   |
| |                 |  |
| | First Elem      |  |
| |_________________|  |
|  _________________   |
| | Second overlaps |  | 
| |_________________|  |
| |       Last      |  |
| | Vertical Bottom |  |
| |_________________|  |
|-----------------------

如果我尝试使用显示表，然后对内部元素使用table-cell，这也会中断，因为每个内部元素共享总可用宽度 ，就好像它们是同一行的所有元素一样。

-------MainElement------
|  _____________         |
| |First|2nd   |         |
| |Ele  |Elem  |         |
| |     |      |         |  
| |     |      |_______  |
| |     |      |Vert   | |
| |     |      |Bottom | |
| |_____|______|_______| |
|-------------------------

由于支持旧版浏览器，因此我无法使用display flex ，它实际上很棒，但与IE =（

是否有办法做到这一点？

Answer 1

您可以使用flexbox：使用以下设置将容器定义为flexcontainer：

.container {
  display: flex;
  flex-direction: column;
  justify-items: space-between;
}

...然后将margin-top: auto添加到最后一个子元素