CSS：如何从 div 底部的底部/堆栈元素填充 div 的内容答案

【问题标题】：CSS: How to fill the contents of a div from the bottom / stack elements at bottom of a divCSS：如何从 div 底部的底部/堆栈元素填充 div 的内容
【发布时间】：2020-10-25 23:24:44
【问题描述】：

我确定以前有人问过这个问题，但我似乎无法找到正确的解释来找到它！ Closest 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

【问题讨论】：

一个带有 flex-end 对齐方式的 flexbox 列？
真的想远离 flexbox 和浮动。但这可能是这里唯一的选择
flexbox 有什么问题？
我一直认为它有很多缺陷。但我想那只是在滥用时。 flexbox可以和绝对定位一起使用吗？
flexbox 和绝对定位无关，你可以随意组合两者，没有问题

标签： html css vertical-alignment

【解决方案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>

【讨论】：