html - div要素を下から上に垂直に積み重ねる方法は?

Question

div2 つの s を互いの上に (つまり、下から)積み重ねようとしています。一番下には動的な高さがあります。それに応じて一番上の div を積み重ねたいと思います。

私は彼らがからでbottom: 0ありたいと思っています。上から下ではなく

Answer 1

純粋なCSSソリューションを探している場合は、Flexbox CSSプロパティを使用することが、要素の順序を希望どおりに変更する唯一の方法です（要素のソースの順序は目的の表示順序と逆になり、要素のサイズは動的になります）。

1つの要素のサイズが固定されている場合（画像など、テキスト要素には推奨されません）、絶対位置を使用できます。

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;
}

必死になったら、JSを使用して要素を再配置できます。

Answer 2

<div>s はブロック レベルの要素です。デフォルトでは垂直方向に積み重ねられます。