Question

我需要一个纯CSS解决方案来重新组织一些div，以便它们以不同的顺序堆叠。我宁愿不为此使用JS，也不使用任何DOM操作，因为我正在使用React.js构建此页面。

任何人都可以想到如何订购以下div：

<div id="slide0"></div>
<div id="slide1"></div>
<div id="slide2"></div>
<div id="slide-right0"></div>
<div id="slide-right1"></div>
<div id="slide-right2"></div>

因此它们类似于以下顺序：

<div id="slide0"></div>
<div id="slide-right0"></div>
<div id="slide1"></div>
<div id="slide-right1"></div>
<div id="slide2"></div>
<div id="slide-right2"></div>

当然，当我不知道会有多少div时。目前共有11个部分，但未来可能会有更多或更少的部分。

*编辑我正在使用Sass，因此我可以选择使用循环等。理想的解决方案是运行一些逻辑，可以为任意数量的div执行此操作div是未知的。

Answer 1

用于 flex 属性

定义您的父div [{1}} display和flex flex-direction

就像这样我只是创建一个演示

＆＃13;

column

＆＃13;

#div > div {
    border: 1px solid  red;
}

#div {
    display: flex;
flex-direction: column;    
}
#slide0 {
    -webkit-order: 1;
    -moz-order: 1;
    order: 1;
}
#slide-right0 {
    -webkit-order: 2;
    -moz-order: 2;
    box-order: 2;
}
#slide1 {
    -webkit-order: 3;
    -moz-order: 3;
    order: 3;
}
#slide-right1 {
    -webkit-order: 4;
    -moz-order: 4;
    order: 4;
}
#slide2 {
    -webkit-order: 5;
    -moz-order: 5;
    order: 5;
}
#slide-right2 {
    -webkit-order: 6;
    -moz-order: 6;
    order: 6;
}

＆＃13;

Answer 2

这是解决方案

<强> Demo

<强> HTML

<div id="flex">
   <div id="slide0">1</div>
   <div id="slide1">2</div>
   <div id="slide2">3</div>
   <div id="slide-right0">4</div>
   <div id="slide-right1">5</div>
   <div id="slide-right2">6</div>
</div>

<强> CSS

#flex { display: flex;flex-direction: column; }
#flex > #slide0 { order: 1; }
#flex > #slide1 { order: 3; }
#flex > #slide2 { order: 5; }
#flex > #slide-right0 { order: 2; }
#flex > #slide-right1 { order: 4; }
#flex > #slide-right2 { order: 6; }

Answer 3

你可以这样做。

＆＃13;

.div-container {
      display: flex; //set display as flex
      flex-direction: column; //Set display direction as vertical (ascending order in this case)
      //prefixes in case you need to prefix it. 
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
    }
    
    #slide0 {
      order: 1 //set order of selected div.
       //prefixes in case you need to prefix it. 
      -webkit-box-ordinal-group: 2;
      -webkit-order: 1;
      -ms-flex-order: 1;
    }
    
    #slide-right0 {
      order: 2;
    }
    
    #slide1 {
      order: 3;
    }
    
    #slide-right1 {
      order: 4;
    }
    
    #slide2 {
      order: 5;
    }
    
    #slide-right2 {
      order: 6;
    }

＆＃13;

<div class="div-container">
  <div id="slide0">Slide0</div>
  <div id="slide1">slide1</div>
  <div id="slide2">slide2</div>
  <div id="slide-right0">slide-right0</div>
  <div id="slide-right1">slide-right1</div>
  <div id="slide-right2">slide-right2</div>
</div>

＆＃13;

对于这样的情况，如果您使用jade或stylus等使用某种模板会很好，这样您就可以使用for循环等而不必编写所有代码你自己。

用于重新排序div的纯CSS解决方案

3 个答案: