Question

我有一个为网站构建CSS移动版的任务，但我不允许更改他们的HTML。

因此，页面上有两个div元素：box-1和box-2。是否有任何常规的方式来切换他们的位置，即只使用CSS将box-2从底部移到顶部？

以下是HTML代码：

<div id="wrapper">

    <div id="box-1"></div>

    <div id="box-2"></div>

</div>

而且，这是CSS：

#wrapper {
    width:400px;
}

#box-1 {
    width:100%;
    height:200px;
    background:red;
}

#box-2 {
    width:100%;
    height:200px;
    background:green;
}

Answer 1

<强> Demo

仅限css解决方案

#wrapper {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
#wrapper #box-1 {
    width: 100%;
    height: 50px;
    background: #faa;
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-flex-order: 2;
    -webkit-order: 2;
    order: 2;
}
#wrapper #box-2 {
    width: 100%;
    height: 50px;
    background: #aaa;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -ms-flex-order: 1;
    -webkit-order: 1;
    order: 1;
}

Answer 2

是的，你可以使用：

#box-2{
position:fixed;
margin-top:0px;
}
#box-1{
postion:fixed;
margin-top:;//height of your box-2 div
}

通过使用它，您可以将div放置在任何您想要的位置。谢谢......

如何仅使用CSS重新排序DOM元素？

2 个答案: