从底部开始向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()