Question

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

在每个元素上我都有几个内在元素。这个内部元素的最后一个我想垂直对齐到底部。

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

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

如果我尝试使用绝对位置垂直对齐最后一个元素，那么这会破坏我的均衡函数，它会为元素设置内联高度css属性。

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

如果我尝试使用显示表，然后将表格单元格用于内部元素，这也会中断，因为每个内部元素共享总可用宽度，就像它们是同一行的所有元素一样。 / p>

-------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添加到最后一个子元素

垂直对齐元素到底部

1 个答案: