从底部开始将元素添加到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);
 }