如何从底部到顶部垂直堆叠div元素？

Question

I am trying to stack 2 div s on top of each other (that is, from bottom up). The bottom one has dynamic height, I want the top div to be stacked on it accordingly.

I want them to be from bottom: 0 and up. not from up to bottom

Answer 1

<div> s are block level elements. They stack vertically by default.

Answer 2

Using the Flexbox CSS properties is the only way to change the ordering of the elements in the way you desire (source order of elements is reversed from the desired display order, elements have dynamic sizes) if you're looking for a pure CSS solution.

If one element has a fixed size (such as an image, not recommended for text elements), you could use absolute positioning:

http://jsfiddle.net/wHDWP/

.container {
    position: relative;
}

.top {
    border: 1px solid red;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height:  1.5em;
}

.bottom {
    border: 1px solid blue;
    padding-bottom: 1.5em;
}

You could rearrange the elements using JS if you're desperate.