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

Question

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

谁能想到如何对以下 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 个部分，但将来可能会增加或减少。

*EDIT 我正在使用 Sass，所以我可以选择使用循环等。一个理想的解决方案是运行一些逻辑，当数字为任意数量的 div 时div 的数量未知。

Answer 1

用于 flex 属性

定义你的父 div display flex 和 flex-direction column

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

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

<div id="div">
    



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