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

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

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

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

    推荐文章