仅通过 CSS 将第一个 div 移动到第二个 div 下面

Question

我在容器中有 2 个 divs：

<div id="container">
   <div id="first">Hello World</div>
   <div id="second">I want to be at the top</div>
</div>

我想在不更改 HTML 的情况下将第一个 div 对齐到第二个 div 下方。这怎么可能？

这是我的 CSS:

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    height:200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
}

我知道我可以将 position:fixed 设置为 #second 并将其对齐到顶部，但是还有其他方法可以实现吗？

这是一个jsFiddle。

div的高度取决于里面的内容。以上固定高度仅供测试用

Answer 1

如果你知道div的高度，你可以使用margin-top来解决这个问题。

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    background:lightblue;
    height:200px;
    margin-top: 200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
    background:yellow;
    margin-top: -400px;
}

如果不知道高度，可以使用flexbox，顺序为属性。

#container {
    display: flex;
    float:left;
    width:100%;
    flex-direction: column;
}

#first {
    order: 2;
    float:left;
    width:100%;
    background:lightblue;
}

#second {
    order: 1;
    float:left;
    width:100%;
    background:yellow;
}

正如 lyjackal 在另一个答案中提到的，您也可以使用 column-reverse 而不是 column，这会反转元素。选择最适合你的。

Answer 2

您可以使用 flex-box 并反转列

#container {
    float:left;
    width:100%;
    display:flex;
    flex-direction: column-reverse;
}

fiddle

Answer 3

都可以，但是这个是固定高度所以修改你css

#container {
    float:left;
    width:100%;
}

#first {
    float:left;
    width:100%;
    height:200px;
    margin-top:200px;
}

#second {
    float:left;
    height:200px;
    width:100%;
    margin-top:-400px;
}

仅通过 CSS 将第一个 div 移动到第二个 div 下面

Move first div below second div via CSS only

html

css

alignment