javascript - 在页面中从下到上定位元素

我想从下到上显示页面的项目。就像在聊天或消息传递中，最后一项显示在底部，然后其余部分显示在顶部。这是一个例子：

.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  padding: 3px;
  margin: 1px;
  color: white;
  display: inline-block;
  vertical-align: bottom;
}

  <div class="chart">
        <div style="height: 10px; width: 100%; ">
          10</div>
        <div style="height: 15px; width: 100%; ">
            15</div>
        <div style="height: 20px; width: 100%; ">
            20</div>
        <div style="height: 25px; width: 100%; ">
            25</div>
        <div style="height: 30px; width: 100%; ">
            30</div>
   </div>

我想在这里从10到30从下到上显示与CSS有关的所有内容。

先感谢您。

最佳答案

使用CSS flexbox可以很容易地做到这一点。您可能需要添加一些供应商前缀，但必不可少的是，将这两行代码添加到父.chart中（还需要将width: 100%添加到子代中）

CSS：

.chart  {
  display: flex;
  flex-wrap:wrap-reverse;
}
.chart div {
  width: 100%;
}

这将使项目反向显示。这是一个有效的小提琴：https://jsfiddle.net/vxtqfqw9/5/

如果您想更多地了解flexbox的强大功能以及如何利用它，我写了一篇文章，其中包含2个非常有用的资源。 :)

http://www.joshuasanger.ca/so-long-floats/