代码之家 › 专栏 › 技术社区 › Damjan Pavlica Zon

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

flexbox css-position responsive-design dom html

-1

Damjan Pavlica Zon · 技术社区 · 11 年前

我有一个任务是为一个网站构建CSS移动版本,但我不能更改他们的HTML。

所以,有两个 div 页面上的元素: box-1 和 box-2 。是否有任何常规的方法来切换它们的位置,即仅使用CSS从底部向顶部移动框-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;
}

2 回复 | 直到 10 年前

1

2

4dgaurav 11 年前

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

2

0

Ajit Singh 11 年前

是的,您可以使用:

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

通过使用它,你可以将你的潜水器放在任何你想要的地方。非常感谢。