從底部開始將元素添加到div？

Question

我有以下代碼：

 $('button').click(function() { $('#parent').append('<div>element</div>'); }); 

  #parent { height: 200px; width: 100px; border: 1px solid #ccc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="parent"></div> <button> Add </button> 

https://jsfiddle.net/8ybnycxv/1/

單擊該按鈕時，我想將一個div元素附加到#parent 。 但是，如果#parent還沒有元素，則會從#parent的底部開始添加元素。 我怎樣才能做到這一點？

編輯：添加了演示圖片

Answer 1

設置vertical-align:bottom將起作用

 $('button').click(function() { $('#parent').append('<div>element</div>'); }); 

 #parent { height: 200px; width: 100px; border: 1px solid #ccc; display: table-cell; vertical-align: bottom; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div id="parent"></div> <button> Add </button> 

Answer 2

使用transform: rotate(180deg)

小提琴

.rotate{
 transform: rotate(180deg);
 }

Answer 3

也許你的意思是這個？

 $('button').click(function() { $('#parent .container').append('<div>element</div>'); }); 

 #parent { position: relative; height: 200px; width: 100px; border: 1px solid #ccc; } #parent .container { position: absolute; bottom: 0; left: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="parent"><div class="container"></div></div> <button> Add </button> 

Answer 4

Abhishek Pandey的回答解決了我的問題。 但是，在某些情況下， display: table-cell可能無法正常工作，因為它有一些缺點：

• 它不適用於溢出（需要包裝在div中）
• 它需要被包裝在父級中， display: table寬度為100％（否則，我們需要做一些像設置寬度到1000000px的hack）

我剛剛找到了使用flexbox解決問題的其他方法

<div id="parent"></div>
<button>
Add
</button>

#parent {
  height: 200px;
  width: 100px;
  overflow-y: auto;
  border: 1px solid #ccc;
  display: flex;
  flex-direction: column-reverse;
}

var i = 0;
$('button').click(function() {
    $('#parent').prepend('<div>element' + (++i) + '</div>');
});

https://jsfiddle.net/j23otgx0/4/

注意，由於flex方向是column-reverse ，我們需要將jquery函數更改為prepend()而不是append()

Answer 5

我有一個不同的案例，並找到了解決方案，也許它可以幫助某人：

我有一個div（容器）並在其中附加多行的可拖動項目，並使用：

transform: rotate(180deg)擰緊了可拖動的功能，所以：

至於容器或父母：

.parent{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-content: flex-start;
}

$('button').click(function() {
    $('.parent').append('<div>element</div>');
});