Question

我在容器中有2个div，如下所示：

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

我想在第二个div下方对齐第一个div而不更改HTML。这怎么可能？

这是我的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

您可以使用弹性框并反转列

#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之下

3 个答案: