时间戳

首页 > 解决方案 > 弹性盒引导图像固定底部

html - 弹性盒引导图像固定底部

问题描述

我在图像位置方面遇到了一些问题，我有几列顶部有标题（弹性框），列高度是弹性的，因此它们可以动态调整高度，使它们是统一的。

但是标题下方是一张图片，我希望图片始终位于底部。

我的代码

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

标签： htmlcsstwitter-bootstrapflexbox

解决方案

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

如果每个card-body都是 flex-column，我们可以使用该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>

推荐阅读