Javascript 在页面中从下到上定位项目

我想从下到上显示页面的项目。和聊天或发短信一样，最后一项显示在底部，其余的显示在顶部。以下是一个例子：

.chart div{
字体：10px无衬线；
背景颜色：钢蓝色；
填充：3倍；
保证金：1px；
颜色：白色；
显示：内联块；
垂直对齐：底部对齐；
}

10
15
20
25
30

这可以通过CSS flexbox轻松实现。您可能需要添加一些供应商前缀，但重要的是要将这两行代码添加到父级

.chart

（您还需要将

宽度：100%

添加到子级）

CSS:

这将使项目反向显示。这是一把小提琴：

如果您想了解更多关于flexbox的强大功能以及如何利用它的信息，我写了一篇文章，其中有两个非常有用的参考资料：

---

您可以使用下面的

jquery

来完成。首先将

.chart

中的所有div作为数组，然后反转数组。然后用数组替换

.chart

的内容

var item=$（'.chart div'）.toArray（）.reverse（）；
$（'.chart'）.html（项目）
.chart div{
字体：10px无衬线；
背景颜色：钢蓝色；
填充：3倍；
保证金：1px；
颜色：白色；
显示：内联块；
垂直对齐：底部对齐；
}

10
15
20
25
30

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