从底部开始将元素附加到div吗? [英] Append element to div starting at the bottom?

问题描述

我有以下代码:

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

  #parent {高度:200px；宽度:100px；边框:1px实心#ccc；}  

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

解决方案

设置 vertical-align:bottom 即可

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

  #parent {高度:200px；宽度:100px；边框:1px实心#ccc；显示:表格单元格；垂直对齐:底部；}  

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

I have the following code:

$('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/

When the button is clicked, I want to append a div element to the #parent. However, if there is no element in the #parent yet, elements will be added starting at the bottom of the #parent. How can I do that?

Edit: added the demonstrating picture

解决方案

Setting vertical-align:bottom will work

$('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>

这篇关于从底部开始将元素附加到div吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！