html - 如何在保持 Bootstrap Grid 的同时在可变文本高度下对齐图像？

Question

我面临着在具有不同高度容器的文本下垂直对齐 Bootstrap 网格内图像的挑战。

Fiddle here

现在是这样的:

这就是我想要实现的目标:

我想在不使用 JavaScript 的情况下执行此操作，因为这只会提高响应能力。

我试过:

1. 使用 flexbox，但我无法让图像贴在底部
2. 给 figure 属性 display:table-cell; 和 vertical-align:bottom，但是容器的高度不一样 flex 盒子
3. 定位图形 absolute 和 bottom:0;，但这(当然)会扰乱父容器的高度。

HTML:

<div class="row">
  <div class="col-xs-3"> 
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non turpis eget libero consequat fringilla vel et sem.
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
</div>

Answer 1

Flexbox 可以工作。

技巧显然是通过将 .row div 设置为 display:flex 来使列高度相等。

那么每一列也需要display:flex但是flex-direction:column。

最后，我们将 figure 设置为 margin-top:auto 以在每种情况下将其“推”到底部。

.row.flex {
  display: flex;
}
.row.flex >div {
  display: flex;
  flex-direction: column;
}
.row.flex > div figure {
  margin-top: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="row flex">
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus suscipit nisl id sagittis. Suspendisse ex neque, tempus a bibendum eget, elementum eget lorem. Integer ultricies turpis eget nibh pulvinar, at facilisis diam dapibus. Quisque non
      turpis eget libero consequat fringilla vel et sem.
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
  <div class="col-xs-3">
    <p>
      Some text here
    </p>
    <figure>
      <img src="http://placehold.it/150x150">
    </figure>
  </div>
</div>