Question

我在图像位置上遇到了一些问题，我在顶部有几列标题（柔性框），这些列的高度是可弯曲的，因此它们可以动态调整高度，从而保持一致。

不过标题下方是图片，我希望图片始终位于底部。

我的代码

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=990" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex">
      <div class="card-body flex-fill">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="https://picsum.photos/600/400?image=991" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Answer 1

您将需要通过修改HTML或使用order属性来重新排列元素。

如果将每个card-body做成一个弹性列，我们可以使用order属性使图像div在每列中以可视方式最后出现，然后将margin-top:auto推到底部列的

。

.card-body {
  flex: 1;
}

.card-body .image {
  order: 2;
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

Answer 2

基于Paulie_D的answer

您可以在不使用额外CSS且仅使用一些其他CSS类的情况下完成此操作： order-1, order-2, order-3和mt-auto

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 d-flex flex-column">
      <div class="card-body flex-fill d-flex flex-column">
        <h4 class="order-1 article-preview__headline"><a href="#">title long title long title long title long title long</a></h4>
        <div class="order-3 mt-auto image align-items-end">
          <a href="#"><img class="mt-auto" style="width: 100%; height: auto" src="http://www.fillmurray.com/300/200" alt="Image" /></a>
        </div>
        <a class="order-2 link" href="#">Link goes here</a>
        <hr/>
      </div>
    </div>

  </div>
</div>

弹性盒引导图像固定底部

2 个答案: