загрузочное изображение flex box с фиксированным основанием - PullRequest
Новая
       17

загрузочное изображение flex box с фиксированным основанием

0 голосов
/ 05 марта 2019

У меня возникли некоторые проблемы с положением изображения, у меня есть несколько столбцов с заголовком вверху (поле Flex). Высота столбцов является гибкой, так что они динамически адаптируются к высоте, чтобы они были однородными.

Однако под заголовком есть изображение, я бы хотел, чтобы изображение всегда было внизу.

Мой код 

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

Ответы [ 2 ]

1 голос
/ 05 марта 2019

На основе Paulie_D ответ

Вы можете сделать это без дополнительных 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>
1 голос
/ 05 марта 2019

Вам нужно будет переупорядочить элементы, внеся изменения в 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>
...