Question

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

postion: absolute;
bottom: 0;

但是，在我的情况下，它实际上不起作用，因此正在寻找其他建议。

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

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

在右边，我有一个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的解决方案，那就太好了< / strong>。

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

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

Answer 1

我建议您为flexbox添加一个polyfill，例如： https://github.com/jonathantneal/flexibility

否则，您将不得不摆弄display：table，float和硬编码的像素值

Answer 2

您可以将flex用于相同的

align-items:flex-end;

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

Answer 3

未经测试。带有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>

将div与内容底部对齐，而不使用绝对位置

3 个答案: