图和文本在底部对齐

Question

我正在使用引导程序。

即使文本很长，我也想在图像底部对齐文本。

.float{
  float:left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">

<div class="col-md-4">
<div><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text</h4></div>
</div>

<div class="col-md-4">
<div><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text</h4></div>
</div>

<div class="col-md-4">
<div><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text</h4></div>
</div>

</div>

Answer 1

使用弹性布局。 Bootstrap具有非常好的类来支持flex。下面是更新的代码

.float{
  float:left;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="row">

<div class="col-md-4">
<div class="d-flex align-items-end"><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text</h4></div>
</div>

<div class="col-md-4">
<div class="d-flex align-items-end"><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text Some text some text some text some texSome text some text some text some texSome text some text some text some tex</h4></div>
</div>

<div class="col-md-4">
<div class="d-flex align-items-end"><img class="float" style="display:inline-block;" src="https://img3.stockfresh.com/files/a/anna_leni/m/59/5391508_stock-vector-exam-preparation-app-flat-icon-with-long-shadow.jpg" width="135" height="200"/>
<h4 style="display:inline-block;">Some text some text some text some text</h4></div>
</div>

</div>