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

Question

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

Fiddle here

现在就是这样：

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

我想在不使用JavaScript的情况下这样做，因为这只会有助于响应。

我试过了：

1. 使用flexbox，但我无法将图片粘贴到底部
2. 提供figure财产display:table-cell;和vertical-align:bottom，但如果没有flexbox
，则容器的高度不同
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>