Append element to div starting at the bottom?

问题

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

回答1:

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>

回答2:

Use transform: rotate(180deg)

Fiddle

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

回答3:

Abhishek Pandey's answer solved my question. However, in some cases, display: table-cell might not work as expected because it has some drawbacks:

It does not work with overflow (needs to be wrapped in a div)
It needs to be wrapped in a parent with display: table to have 100% width (otherwise, we need to do some hack like set width to 1000000px)

I just found other way to solve my question by using 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/

Note since the flex direction is column-reverse, we need to change jquery function to prepend() instead of append()

回答4:

Maybe you mean this?

$('button').click(function() {
	$('#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>

回答5:

I have a different case and found a solution, maybe it could help someone:

I have a div (container) and appending draggable items inside of it with multiple rows, and using:

transform: rotate(180deg) screwed the draggable functionality so:

as for the container or parent:

.parent{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
    align-content: flex-start;
}

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

来源：https://stackoverflow.com/questions/39741194/append-element-to-div-starting-at-the-bottom

标签

javascript

jquery

html

css