從底部開始向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

也許你說這個？

$('button').click(function() { 
 
\t $('#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 3

使用transform: rotate(180deg)

Fiddle

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

Answer 4

Abhishek Pandey的回答解決了我的問題。

• 它不具有溢出工作（需要被包裹在一個div）
• 它需要被包裝在一個父：但是，在某些情況下，display: table-cell可能不是因爲它有一些缺點，如預期與display: table有100％的寬度（否則，我們需要做一些黑客像集寬度1000000px）

我只是發現其它方式使用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/

注意，因爲屈曲方向是column-reverse，我們需要改變的jQuery功能prepend()而不是append()