從下到上在頁面中定位項目

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很容易實現。您可能需要增加一些供應商前綴，但重要的是這些兩行代碼到父.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/

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>