从底部开始向div添加元素?

时间:2016-09-28 07:49:23

标签: javascript jquery html css

我有以下代码:



$('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;
&#13;
&#13;

https://jsfiddle.net/8ybnycxv/1/

单击该按钮时,我想将一个div元素附加到#parent。但是,如果#parent中没有元素,则会从#parent底部开始添加元素。我怎么能这样做?

编辑:添加了演示图片

enter image description here

5 个答案:

答案 0 :(得分:6)

设置vertical-align:bottom将起作用

&#13;
&#13;
$('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;
&#13;
&#13;

答案 1 :(得分:3)

使用transform: rotate(180deg)

Fiddle

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

答案 2 :(得分:0)

也许你的意思是这个?

&#13;
&#13;
$('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;
&#13;
&#13;

答案 3 :(得分:0)

Abhishek Pandey的答案解决了我的问题。但是,在某些情况下,display: table-cell可能无法正常工作,因为它有一些缺点:

  • 它不适用于溢出(需要包装在div中)
  • 它需要包含在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>');
});