CSS - 将 div 对齐到其父 div 的底部答案

【问题标题】：CSS - Align div to bottom respective his parent divCSS - 将 div 对齐到其父 div 的底部
【发布时间】：2020-09-16 22:13:46
【问题描述】：

我正在尝试将 div #alignBottom1 和 #alignBottom2 向下对齐，但不移除父 div 左侧的浮动，也不使用绝对位置或上边距。

我该怎么办？

这是我的代码：

#TotContainer {
  height: 900px;
}

#container {
  max-height: 90%
}

.col-sm-6 {
  width: 50%;
  float: left;
  height: 100%;
  padding: 10px;
}

.col-sm-12 {
  width: 100%;
  float: left;
  background: yellow;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="TotContainer">
  <div id="container">
    <div class="col-sm-6" style="background:blue;">XXXXXX</div>
    <div class="col-sm-6" style="background:red;">
      <div id="alignBottom1">Text to align at the bottom 1</div>
      <div id="alignBottom2">Text to align at the bottom 2</div>
    </div>
    <div class="col-sm-12">footer</div>
  </div>
</div>

感谢您的帮助！

【问题讨论】：

我不明白你想要达到什么目的。也许您可以添加所需结果的草图...？

标签： html css alignment vertical-alignment

【解决方案1】：

如果你把父容器变成一个弹性盒子，你可以很容易地做到这一点。

在您的示例中，我为父级指定了一个高度值，以便您可以看到使用 flexbox 并将内容对齐到其父级末尾的效果。

#alignBottom {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    height: 100px; /* giving the element a height to exaggerate the effect */
}

#TotContainer {
  height: 900px;
}

#container {
  max-height: 90%
}

.col-sm-6 {
  width: 50%;
  float: left;
  height: 100%;
  padding: 10px;
}

.col-sm-12 {
  width: 100%;
  float: left;
  background: yellow;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="TotContainer">
  <div id="container">
    <div class="col-sm-6" style="background:blue;">XXXXXX</div>
    <div id="alignBottom" class="col-sm-6" style="background:red;">
      <div id="alignBottom1">Text to align at the bottom 1</div>
      <div id="alignBottom2">Text to align at the bottom 2</div>
    </div>
    <div class="col-sm-12">footer</div>
  </div>
</div>

【讨论】：

谢谢你！最后一个问题：如果我在#alignBottom2 中有两个 div，我希望第一个是顶部对齐，第二个是底部对齐，我该怎么办？
您可以通过将justify-content 属性更改为justify-content: space-between; 来做到这一点

【解决方案2】：

CSS flexbox 可以通过几行代码以多种方式帮助对齐容器内的内容。这可能对你有用。

#TotContainer {
  height: 900px;
}

#container {
  max-height: 90%
}

.col-sm-6 {
  width: 50%;
  float: left;
  height: 100%;
  padding: 10px;
}
.col-sm-6:nth-child(2){
 /* adding this */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* adding some height to the container for better visibility od effect */
  height: 80px;
}

.col-sm-12 {
  width: 100%;
  float: left;
  background: yellow;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

<div id="TotContainer">
  <div id="container">
    <div class="col-sm-6" style="background:blue;">XXXXXX</div>
    <div class="col-sm-6" style="background:red;">
      <div id="alignBottom1">Text to align at the bottom 1</div>
      <div id="alignBottom2">Text to align at the bottom 2</div>
    </div>
    <div class="col-sm-12">footer</div>
  </div>
</div>

【讨论】：