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

Question

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

.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 相关的内容。

提前谢谢你。

Answer 1

使用 CSS flexbox 可以很容易地实现这一点。您可能需要添加一些 vendor 前缀，但必须通过将这两行代码添加到父级 .chart(您还需要将 width: 100% 添加到 children )

CSS:

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

这将使元素反向显示。这是一个工作 fiddle :https://jsfiddle.net/vxtqfqw9/5/

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

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