Question

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

＆＃13;

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

＆＃13;

  <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>

＆＃13;

在这里我想要的是，它将显示从10到30的底部到顶部与CSS有关。

提前谢谢。

Answer 1

使用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/

Answer 2

您可以使用下面的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>

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

2 个答案: