移動以下第二個div第一個div通過CSS只

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