css&；javascript对齐问题。这在css中可能吗？

我有一个相当困难的问题，我被困在我会感谢一些见解，如果这是甚至可以与CSS。我有6个div，1-3需要在左栏中，4-6需要在右栏中。单击任何div时，它们将使用jquery hide（）隐藏。我发现困难的部分是，当您删除一个div时，我需要它们以特定的方式重新排序。请参阅附件中的图片，了解我要进行的订购/再订购过程。请看我的提琴，了解我的进步，谢谢大家的帮助

1.
2.
3.
4.
5.
6.

---

因此，您可以看到，如果删除了任何1-3个div，则4-6中的div需要从左栏移动到第一栏的最后一个位置。

使用CSS列并删除子栏的

float

属性：

#容器{
/* ... */
-webkit列数：2；/*Chrome、Safari、Opera*/
-moz列计数：2；/*Firefox*/
列数：2；
高度：300px；
}

此外，为了防止框在列（找到的）之间拆分，请执行以下操作：

---

您可以使用

flex-flow:column-wrap

：

$（“.item”）。每个（函数（）{
$（此）。在（“单击”，函数（）上）{
$（this.hide（））
});
});
$（“按钮”）。每个（功能（索引）{
$（此）。在（“单击”，函数（）上）{
$（'#'+（索引+1））.toggle（）；
});
});
.container{
显示：-webkit flex；
显示器：flex；
-webkit flex流：列换行；
柔性流：柱包裹；
宽度：100px；
高度：150像素；
}
.项目{
宽度：50px；
高度：50px；
边界：1px；
线高：50px；
文本对齐：居中；
}
.r{背景色：#bf616a；}
.o{背景色：#d08770；}
.y{背景色：#ebcb8b；}
.g{背景色：#a3be8c；}
.b{背景色：#96b5b4；}
.v{背景色：#8fa1b3；}
.layout{
显示：-webkit flex；
显示器：flex；
宽度：400px；
-webkit内容：周围的空间；
证明内容：周围的空间；
}

1.
2.
3.
4.
5.
6.
切换：
1.
切换
2.
切换
3.
切换
4.
切换
5.
切换
6.
切换
您总是要有6个元素吗？是的。最大值始终为6。使用子选择器将前三项向左浮动。当一个项目被隐藏时，它不会被视为前三个子项之一，它会像你描述的那样移动所有内容。将其视为一个网格，让你的单元格单独存在，只需担心移动数据。例如：如果删除了4，请将5s数据转移到4元素所在的位置。这里有一个使用javascript的替代解决方案，您可以尝试一下。这是正确的答案，但值得注意的是，它只在IE10及以上版本中有效。它确实有一些bug。@blex是的，修复了它谢谢您的反馈@btevfik，我没有Safari。谢谢你的帮助blex我真的很感激。有没有浏览器前缀使这个Safari兼容？不用担心，我真的很感谢你的帮助！太多了，今晚我肯定会看到更多的展品：-webkit flex；显示器：flex-webkit flex流：列换行；柔性流：柱包裹；
 <div id="container">
     <div class="child">1</div>
     <div class="child">2</div>
     <div class="child">3</div>
     <div class="child">4</div>
     <div class="child">5</div>
     <div class="child">6</div>  
 </div>

.child {
    /* ... */
    -webkit-column-break-inside: avoid; /* Chrome, Safari */
    page-break-inside: avoid;           /* Theoretically FF 20+ */
    break-inside: avoid-column;         /* IE 11 */
    display:table;                      /* Actually FF 20+ */
}