html - 如何从下到上垂直堆叠div元素？

Question

我正在尝试将 2 divs 堆叠在一起（即从下向上）。底部具有动态高度，我希望顶部 div 相应地堆叠在其上。

我希望他们bottom: 0自上而下。不是自上而下

Answer 1

<div>s 是块级元素。它们默认垂直堆叠。

Answer 2

如果您正在寻找纯 CSS 解决方案，使用 Flexbox CSS 属性是按照您想要的方式更改元素顺序的唯一方法（元素的源顺序与所需的显示顺序相反，元素具有动态大小）。

如果一个元素具有固定大小（例如图像，不推荐用于文本元素），则可以使用绝对定位：

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 重新排列元素。