调整独立div中的内容

Question

你能告诉我如何使第二个div的内容与底部对齐吗？在不设置height的情况下，两个框的大小会相同吗？

div {
background: blue;
display: inline-flex;
width: 100px;
height: auto;
}

<div>
1<br>
2
</div>
<div>
1
</div>

Answer 1

要做到这一点，您需要一个带有display: flex的父容器来扩展其子容器，并将align-items: flex-end;添加到子容器div

.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>

Answer 2

我认为它可以帮助你。

.container {
display: flex;
align-items: flex-end
}
.container div {
background: blue;
width: 100px;
height: auto;
text-align: center;
}

<div class="container">
<div>
1<br>
2
</div>
<div>
1
</div>
</div>

Answer 3

您可以添加vertical-align: bottom来对齐这些div的底部。但据我所知，如果不添加父元素或设置高度属性，就无法获得相同的高度

div {
background: blue;
display: inline-flex;
vertical-align: bottom; /* Bottom Align */
width: 100px;
height: auto;
}

<div>
1<br>
2
</div>
<div>
1
</div>