将 div 对齐到内容的底部而不使用绝对位置答案

【问题标题】：Align div to bottom of content without using position absolute将 div 对齐到内容的底部而不使用绝对位置
【发布时间】：2019-10-21 21:46:09
【问题描述】：

我知道这个问题已经被问过很多次了，但我一直看到使用的答案......

postion: absolute;
bottom: 0;

但是，它在我的情况下并没有真正起作用，所以正在寻找其他建议。

由于我的列布局，使用 flex 的答案似乎不起作用。我也很了解弯曲，所以我不太了解它。

我在左侧有一个设置宽度为 145 像素的图像，但高度可以不同。

在右侧，我有一个 div，其中包含 2 个 div（TimelineAddress 和 TimelineFavouriteUser），每个 div 内部都有跨度。一个用于属性地址，另一个带有用户名和一些附加文本。我希望 div TimelineFavouriteUser 位于底部，使其与图像底部对齐。见下图。

 ----------- ----------------------------
|Image      | Address - Dynamic Length   |
|Can be     |                            |
|different  |                            |
|heights    |                            |
|           |                            |
|           |                            |
|           |                            |
|           |                            |
|           | User and text at bottom    |
 ----------- ----------------------------

这可以通过使用来实现

postion: absolute;
bottom: 0;

但是，当涉及到响应能力和较低的分辨率时，地址可能会与底部的文本重叠，因为地址文本会分成越来越多的行。见下图。

我使用了一些 javascript 将正确的margin-top 动态添加到 TimelineFavouriteUser，尽管如此，我更喜欢仅使用 CSS 的解决方案，因为运行 margin-top 值计算的函数被调用了很多，因为屏幕上可能有 100 个这样的元素。

我知道flex 可以做到这一点，但是，我们至少需要支持IE9，所以如果IE9 有解决方案，那就太好了。 p>

如果不是，那么我也许可以为不支持 flex 的浏览器提出一个解决方案，如果 flex 是最佳解决方案。

如果您想自己测试一下，我有一个JSFiddle。

【问题讨论】：

嘿，这是一个几乎做同样事情的人。不过，在没有 javascript 的情况下无法在 IE9 中工作 - stackoverflow.com/questions/56475464/…
尝试使用css网格。哎呀 IE9
如果你不想使用位置：绝对比你可以尝试使用垂直对齐：底部。您可以尝试在此线程中参考答案。 stackoverflow.com/questions/26124865/…

标签： javascript html css flexbox internet-explorer-9

【解决方案1】：

你也可以用 flex 来做同样的事情

align-items:flex-end;

这是一个小提琴 https://jsfiddle.net/karantewari/pw4hsqry/

【讨论】：

【解决方案2】：

未经测试。带有 CSS 供应商前缀。

div {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 2fr;
      grid-template-columns: 1fr 2fr;
  -ms-grid-rows: 2fr 1fr;
      grid-template-rows: 2fr 1fr;
  height: calc(100vh - 1rem);
  width: 100%;
}

section {
  background-color: lightpink;
}

section:first-child {
  background-color: lightblue;
  -ms-grid-row-span: 2;
      grid-row-end: span 2;
}

section:last-child {
  background-color: lightgreen;
}

<div>
  <section>X</section>
  <section>y</section>
  <section>z</section>
</div>

【讨论】：

【解决方案3】：

我会向你推荐一个用于 flexbox 的 polyfill，可能类似于： https://github.com/jonathantneal/flexibility

否则您将不得不摆弄 display:table、浮点数和硬编码的像素值

【讨论】：