css中怎么让块底部对齐

在CSS中，有时候需要对齐一些块元素的底部，但是由于每个块元素的高度不同，这个对齐就有点棘手了。下面我们就来探讨一下如何让块底部对齐。

// HTML代码
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

//CSS代码
.container {
  display: flex;
  align-items: flex-end;
}
.box {
  width: 100px;
  height: auto;
  border: 1px solid black;
} 

上述代码中，我们使用了CSS的flex布局来实现块底部对齐，具体来说，就是将容器的align-items属性设置为flex-end，这样就可以让子元素的底部对齐。同时，子元素的高度也设置为自适应（height: auto），这样就可以根据内容的高度来调整元素高度，从而达到块底部对齐的效果。

另外，如果不想使用flex布局，还可以使用其他方法来实现块底部对齐。比如，可以将子元素设置为inline-block，并将其vertical-align属性设置为bottom就可以让块底部对齐。

// HTML代码
<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

//CSS代码
.container {
  font-size: 0; /* 去除inline-block产生的空格 */
}
.box {
  display: inline-block;
  width: 100px;
  height: auto;
  border: 1px solid black;
  vertical-align: bottom;
} 

总之，无论是使用flex布局还是其他方式，只要设置合适的属性，就可以很容易地让块底部对齐。