html - 具有可变填充的 CSS 底部对齐

Question

我想弄清楚如何使用 CSS 将 div 对齐到父 div 的底部。但是，要注意的是，如果另一个同级 div 遇到它，我需要底部对齐的 div 向下移动。下图显示了可能发生的各种对齐的一些示例。前两个是理想的，我可以轻松地使用绝对值并将 bottom 设置为 0。但是，该解决方案在第三个示例中失效，因为文本会与底部 div 重叠。

Image showing what I am trying to achieve

Answer 1

假设所有图片大小相同

HTML

<div class="item">
  <div>
    <div class="image"></div>
  </div>
  <div class="text">
    <div>
      <div class="top">
        <div>
          Top
        </div>
      </div>
      <div class="bottom">
        <div>
          Bottom
        </div>
      </div>
    </div>
  </div>
</div>

CSS

  .item {display: table;}
  .item > div {display: table-cell; vertical-align: top;}
  .text {width: 100%;}
  .text > div {height: 144px; width: 100%; display: table;}
  .text > div > div {display: table-row;}
  .text > div > div > div {display: table-cell;}
  .top {height: 100%;}

Demo