将单个 div 对齐到具有可变高度的行中 div 的底部

Question

我正在尝试在（bootstrap v4）行内的（bootstrap v4）col内对齐一个div，该行可以具有可变高度。这是一个快速参考的代码笔 - https://codepen.io/ajmajma/pen/veNRdY

和代码本身：

html

<div class="basket-reccomendations">
  <div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
  <div class="basket-reccomendations__body col-12">
    <div class="row">
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">Charcoal</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__price no-variant">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
    </div>
  </div>
</div>

css (scss)

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        margin-bottom: 2rem;
      }
    }
  }
}

如果您查看 div 的第二行 - 高度中有额外的文本，而我想要实现的是让所有添加到错误 btns 的内容与该 singleReccomendation div 的底部对齐。

我尝试在 singleReccomendation 上设置相对位置，在添加到包上设置 position: absolute, bottom: 0，但它似乎不起作用。我正在将 flex 与 bootstrap v4 一起使用，我想知道解决此问题的最佳方法是什么？谢谢！

Answer 1

如果您将display: flex; flex-direction: column; 添加到.singleReccomendation，然后将margin-top: auto 添加到__addToBag，它将底部对齐

Updated codepen

堆栈sn-p

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;
}
.basket-reccomendations__body .singleReccomendation {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}
.basket-reccomendations__body .singleReccomendation__wrapper {
  max-width: 20rem;
  position: relative;
  margin: 0 auto;
}
.basket-reccomendations__body .singleReccomendation__img {
  width: 15rem;
  height: 15rem;
}
.basket-reccomendations__body .singleReccomendation__price {
  color: #000000;
}
.basket-reccomendations__body .singleReccomendation__addToBag {
  text-transform: none;
  margin-bottom: 2rem;
  margin-top: auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="basket-reccomendations">
  <div class="basket-reccomendations__title col-12"><span>Know what else is great?</span></div>
  <div class="basket-reccomendations__body col-12">
    <div class="row">
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__variant">Charcoal</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation " href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Name</div>
        <div class="singleReccomendation__price no-variant">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
      <a title="Test" class="col-6 singleReccomendation" href="">
        <div class="singleReccomendation__brand">Brand</div>
        <div class="singleReccomendation__name">Extra long name that might skew the row height - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultricies tellus massa, quis fringilla nunc aliquet quis. Etiam non bibendum lacus. Nullam at nibh cursus, convallis tellus id, rhoncus tellus. Mauris interdum justo nec ex interdum gravida. In hac habitasse platea dictumst. Cras vitae ex ligula. </div>
        <div class="singleReccomendation__variant">variant</div>
        <div class="singleReccomendation__price">$10.00</div>
        <div class="singleReccomendation__addToBag"><span>Add to your bag</span></div>
      </a>
    </div>
  </div>
</div>

Answer 2

它应该与.singleRecomendation 上的position: relative 和position: absolute + bottom: 0 上addToBag 一起使用。您只需添加一个填充以防止按钮与上面的文本重叠。

这是css：

.basket-reccomendations {
  background: #fff;
  padding: 1rem;
  margin-top: 2.5rem;

  &__title {

  }

  &__body {

    .singleReccomendation {
      text-decoration: none;
      position: relative;
      padding-bottom: 40px;
      margin-bottom: 2rem;

      &__wrapper {
        max-width: 20rem;
        position: relative;
        margin: 0 auto;
      }

      &__img {
        width: 15rem;
        height: 15rem;
      }

      &__brand {

      }

      &__name {

      }

      &__variant {

      }

      &__price {
        color: #000000;
      }

      &__addToBag {
        text-transform: none;
        position: absolute;
        bottom: 0;
      }
    }
  }
}