CSS:如何从底部填充 div 的内容/在 div 底部堆叠元素

Question

我敢肯定以前会问过这个问题，我只是似乎找不到正确的解释来找到它！最接近的问题，但无法让这些选项为我工作。

我有一个薄的div 元素，它将输入动态值，它应该将div 中的当前元素"推高"到div 上。

目前，我已经寻找了几个相关问题，但是这些问题建议定位(absolute/relative/etc(，但是在这种情况下，我无法弄清楚如何实现这些问题。

对于当前的标记，我不想使用float因为这完全搞砸了 DOM 和分层(这不会让我开始，这不是我想要的地方(。

.ratingList {
position: absolute;
bottom: 35px;
right: 5px;
height: 200px;
width: 40px;
background: red;
text-align: center;
}
.ratingList b {
width: 40px;
display: block;
height: 40px;
border: 2px solid gray;
border-radius: 50%;
box-sizing: border-box;
background: #333;
line-height: 36px;
color: #eee;
}

<div class="ratingList">
ROI
<b>12A</b> UK
<b>15</b>
</div>

从本质上讲，如果我要添加另一个US <b>12</b>这应该会推高当前标记并显示在下面UK <b>15</b>

由于此堆栈不仅仅是文本(可能包括图像(，因此如果垂直对齐可以工作，则不会太过。

```         *********
```         *       *   <-- old elements get pushed upwards (but still aligned to bottom)
```         *       *
```         *   /  *
```         *   ||  *  
```         *       *
```         *       *   <-- child elements are aligned to the bottom of parent
```         *       *
```  new element enters here

Answer 1

Flexbox 使这变得非常轻松 - 我认为一些更具描述性的 HTML/CSS 也不会出错：

* {
box-sizing: border-box;
margin: 0;
}
.ratingList {
position: absolute;
bottom: 35px;
right: 5px;
height: 200px;
width: 40px;
background: red;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.tag {
text-align: center;
}
.rating {
width: 40px;
height: 40px;
border: 2px solid gray;
border-radius: 50%;
background: #333;
line-height: 36px;
color: #eee;
}

<div class="ratingList">
<div class="tag">
<p>ROI</p>
<p class="rating">
<b>12A</b>
</p>
</div>
<div class="tag">
<p>UK</p>
<p class="rating">
<b>15</b>
</p>
</div>
</div>