Question

我正在尝试创建相等的类似于卡片的列，使用flex将按钮固定到内容底部的位置未对齐。不幸的是，该按钮被从列中推出。我知道这是因为卡体的高度设置为100％，但是我不确定为什么将其设置为超出其父级。

任何帮助将不胜感激！

Codepen： https://codepen.io/anon/pen/wLjrzw

HTML：

<!--
.container-fluid>.row>.col-12.col-sm-6.col-md-3.ja-card*4>a>img[src="http:lorempixel.com/400/300/cats"]^.ja-counter{$}+.ja-card-body.d-flex.flex-column>h4>lorem4^p>lorem^a.mt-auto.btn.btn-lg.btn-primary>lorem2
-->
<div class="container-fluid">
  <div class="row">
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">1</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Lorem ipsum dolor sit.</h4>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident, impedit qui voluptates porro vero incidunt, aliquid dignissimos quae a tempora nisi quis consequatur atque. Officiis laudantium laborum ab sequi pariatur?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Lorem, ipsum.</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">2</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Optio excepturi inventore reprehenderit?</h4>
        <p>Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.Sapiente quis, commodi fugiat architecto temporibus accusantium veniam quasi nisi tempore facere sint similique magni, quae suscipit rem molestias. Officia quidem sint sapiente odit nisi sit pariatur repellat eaque consequuntur.</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Quidem, perferendis!</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">3</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Aperiam porro quae deserunt?</h4>
        <p>Doloremque tenetur aut adipisci dolore sed aspernatur! Praesentium vitae ut, quisquam sed nesciunt odit! Tempora incidunt, laborum impedit ratione maiores ipsum, laboriosam odit aspernatur ex reiciendis necessitatibus similique id optio?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Nobis, eum.</a>
      </div>
    </div>
    <div class="col-12 col-sm-6 col-md-3 ja-card">
      <a href=""><img src="http:lorempixel.com/400/300/cats" alt=""></a>
      <div class="ja-counter">4</div>
      <div class="ja-card-body d-flex flex-column">
        <h4>Aspernatur mollitia commodi ipsum!</h4>
        <p>Quia veniam recusandae ut, cum porro assumenda. Aut magnam quo rem sapiente vitae sequi, distinctio error repudiandae consequatur ut doloribus commodi rerum? Cumque iure quis pariatur, consequatur dolore consectetur doloribus?</p>
        <a href="" class="mt-auto btn btn-lg btn-primary">Odit, consectetur?</a>
      </div>
    </div>
  </div>
</div>

CSS：

.ja-card {
  background-color: #d6d6d6;
  padding: 0;
} 
img {
  width: 100%;
} 
.ja-card:nth-child(even) {
  background-color: #f6f6f6;
}
.ja-card-body {
  height:100%;
  padding: 2em;
}
.ja-counter {
  position: relative;
  top: 0;
  left: 50%;
  margin: -35px 0 0 -35px;
  display: block;
  width: 70px;
  height: 70px;
  border: 5px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-family: "Helvetica", sans-serif;
  font-size: 36px;
  font-weight: bold;
  line-height: 60px;
  text-align: center;
  background-color:red;
}

Answer 1

解决此问题的更好方法是对卡使用flexbox。然后在其子级之间留出空间。

所以

将display: flex和flex-direction: column添加到.ja-card
为justify-content: space-between设置.ja-card-body

此外，您无需为.ja-card-body设置100％的高度。这没用。

Working Demo

Answer 2

在您的box-sizing:border-box CSS定义中添加 .ja-card-body 。

Flex使按钮移至div

2 个答案: