我有以下代码:
$('button').click(function() {
$('#parent').append('<div>element</div>');
});
&#13;
#parent {
height: 200px;
width: 100px;
border: 1px solid #ccc;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent"></div>
<button>
Add
</button>
&#13;
https://jsfiddle.net/8ybnycxv/1/
单击该按钮时,我想将一个div元素附加到#parent
。但是,如果#parent
中没有元素,则会从#parent
的底部开始添加元素。我怎么能这样做?
编辑:添加了演示图片
答案 0 :(得分:6)
设置vertical-align:bottom
将起作用
$('button').click(function() {
$('#parent').append('<div>element</div>');
});
&#13;
#parent {
height: 200px;
width: 100px;
border: 1px solid #ccc;
display: table-cell;
vertical-align: bottom;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><div id="parent"></div>
<button>
Add
</button>
&#13;
答案 1 :(得分:3)
答案 2 :(得分:0)
也许你的意思是这个?
$('button').click(function() {
$('#parent .container').append('<div>element</div>');
});
&#13;
#parent {
position: relative;
height: 200px;
width: 100px;
border: 1px solid #ccc;
}
#parent .container {
position: absolute;
bottom: 0;
left: 0;
}
&#13;
<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>
&#13;
答案 3 :(得分:0)
Abhishek Pandey的答案解决了我的问题。但是,在某些情况下,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/
注意,因为flex方向是column-reverse
,我们需要将jquery函数更改为prepend()
而不是append()
答案 4 :(得分:0)
我有不同的情况,找到了解决方案,也许可以帮助某人:
我有一个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>');
});