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

Posted 2023-03-28

【中文标题】将单个 div 对齐到具有可变高度的行中 div 的底部

【英文标题】：Align single div to bottom of div in row with variable height

【发布时间】：2018-02-26 05:51:07

【问题描述】：

我正在尝试在（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 一起使用，我想知道解决此问题的最佳方法是什么？谢谢！

【参考方案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>

【参考方案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;