html - 使用 CSS 将所有 Div 子元素底部对齐

Question

我试图将所有 div 的子元素对齐到它的底部。我使用了 dispalay:table 和 table-cell 方法(我在网上找到的)，但这对我不起作用。我也尝试了其他一些方法，但无法完成。这是 LINK和我的代码结构:

HTML:

<div class="a">
  <div class="c"></div>
  <div class="b">
    <div class="al" style="background:green;"></div>
    <div class="al" style="background:blue;"></div>
    <div class="al" style="background:tan;"></div>
  </div>
</div>

CSS:

.a{
  float: left;
  background: red;
  display: table;
  padding-right: 1px;
  height: 100%;
}
.b{
  position: relative;
  float: left;
  background: blue;
  display: table;
  height: 100%;
  width: 29px;
}
.c{
  height: 300px;
  width: 90px;
  background: grey;
  float: left;
}
.al{
  margin-top: 2px;
  background: yellow;
  display: table-cell;
  width: 100%;
  height: 30px;
  padding: 20px;
  vertical-align: bottom;
}

这是 Link of Code

Answer 1

如果想把.b的内容对齐到底部，可以使用

.b {
  display: table-cell;
  vertical-align: bottom;
}

完整代码:

.a {
  display: table;
  padding-right: 1px;
  background: red;
}
.b {
  display: table-cell;
  vertical-align: bottom;
  width: 29px;
  background: blue;
}
.c {
  display: table-cell;
  height: 300px;
  width: 90px;
  background: grey;
}
.al {
  margin-top: 2px;
  height: 30px;
  padding: 20px;
}

<div class="a">
  <div class="c"></div>
  <div class="b">
    <div class="al" style="background:green;"></div>
    <div class="al" style="background:blue;"></div>
    <div class="al" style="background:tan;"></div>
  </div>
</div>