Question

我有以下代码：

＆＃13;

$('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的底部开始添加元素。我怎么能这样做？

编辑：添加了演示图片

Answer 1

设置vertical-align:bottom将起作用

＆＃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;

Answer 2

使用transform: rotate(180deg)

Fiddle

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

Answer 3

也许你的意思是这个？

＆＃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;

Answer 4

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()

Answer 5

我有不同的情况，找到了解决方案，也许可以帮助某人：

我有一个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>');
});

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

5 个答案: