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

Positioning item in page from bottom to top

本文关键字：定位 项目 从下到上      更新时间：2023-09-26

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

.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的强大功能，以及如何利用它，我写了一篇文章，其中有两个非常有用的资源。：）

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

您可以使用jquery，如下所示。首先将.chart中的所有div作为数组，然后反转数组。然后用数组替换.chart的内容。

var item = $('.chart div').toArray().reverse();
$('.chart').html(item);
.chart div {
    font: 10px sans-serif;
    background-color: steelblue;
    padding: 3px;
    margin: 1px;
    color: white;
    display: inline-block;
    vertical-align: bottom;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

相关文章：