提问者:小点点

在独立的div中对齐内容


你能告诉我如何使第二个div的内容对齐到底部吗?不设置高度的情况下,这两个盒子的大小是一样的?

null

div {
  background: blue;
  display: inline-flex;
  width: 100px;
  height: auto;
}
<div>
1<br>
2
</div>
<div>
1
</div>

null


共1个答案

匿名用户

为此,您需要一个带有display:flex的父容器来扩展它们的子容器,并将align-items:flex-end;添加到子容器div

null

.container {
  display: flex;
}

.container div {
  background: blue;
  display: inline-flex;
  align-items: flex-end;
  width: 100px;
  height: auto;
}
<div class="container">
  <div>
    1<br> 2
  </div>
  <div>
    1
  </div>
</div>