所有div在底部的flexbox中具有相同的高度

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (57)

我有以下html来构建一个带有bootstrap 4的网格。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  <div class="col-sm-12 col-md-3">
    <div class="row">
      <div class="col-lg-12">
        here are different heights possible
        here are different heights possible
        here are different heights possible
      </div>
    </div>
    <div class="row align-items-end">
      <div class="col-lg-12 date">
        should always be at bottom (like the fourth date)
      </div>
    </div>
  </div>
  
</div>

我希望日期始终位于第二行的底部。也许图片更好地解释了问题。前三个日期与flexbox底部的第四个日期不一致:

提问于
用户回答回答于

没有办法在单独的 flexbox父项的子项中同等地对齐内容。但是,您可以使列使用flexbox容器d-flex,然后使用mt-automargin-top:auto)将日期推送到列的底部。

        <div class="col-sm-12 col-md-3 d-flex flex-column">
            <div class="row">
                <div class="col-lg-12">
                    here are different heights possible
                </div>
            </div>
            <div class="row mt-auto">
                <div class="col-lg-12 date">
                    date
                </div>
            </div>
        </div>

演示:https//www.codeply.com/go/gLYW7liCfc

用户回答回答于

您可以使用flex:1拉伸日期容器以填充行的剩余空间,并使用align-items将所有内容对齐到底部:flex-end :-)

我在下面稍微修改了你的例子,你实际上并不需要在包装器中额外添加.row - col-lg-12应该是你需要包装到下一行的所有内容。

我只添加了边框:白色1px固体; 这样你就可以看到我的解决方案是如何工作的 - 你可以忽略它。

(您可能需要查看全屏才能看到堆叠的元素正常工作)!

.wrapper {
  display: flex;
  flex-direction: column;
  background: #1D3159;
  color: white;
}

.date {
  background: #1D3159;
  color: white;
  flex: 1;
  display: flex;
  align-items: flex-end;
  border:white 1px solid;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- just for this example -->

<div class="row">
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
  <div class="col-sm-12 col-md-3 wrapper">
    <div class="col-lg-12">
      here are different heights possible here are different heights possible here are different heights possible here are different heights possible here are different heights possible
    </div>
    <div class="col-lg-12 date">
      should always be at bottom (like the fourth date)
    </div>
  </div>
</div>

扫码关注云+社区

领取腾讯云代金券