ブートストラップグリッドを維持しながら、可変高さのテキストの下で画像を整列する方法は？

Question

異なる高さのコンテナを持つテキストの下で、ブートストラップグリッド内の画像を垂直に整列させることに挑戦しています。

Fiddle here

これは、今あるものである：

これは私が達成したいものです。

私は使用せずにこれを実行したいと思いますJavaScriptは応答性だけに役立つからです。

1. がflexboxを使用して、私はイメージが下
2. に固執することができませんプロパティdisplay:table-cell;とvertical-align:bottomfigureを与えるが、コンテナは同じ高さがないわけではない。

   私が試してみました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

。

明らかに、このトリックは、.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>