图片和文字在底部对齐

Question

我正在使用 bootstrap。

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

.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>

图片和文字在底部对齐

Img and text aligned at the bottom

css-float

twitter-bootstrap