javascript - 将元素列表提供给 3 列布局

Question

假设我有一个要以 3 列布局显示的框列表，我想实现如下所示的效果，其中每个数字代表一个固定宽度的框 (div)。

   1 2 3
   4 5 6
   7 8...

这样做的一种方法是在页面上有 3 列，并将对象分成 3 个列表，其中第一个列表包含元素 1 4 7，第二个列表包含元素 2 5 8 等等，并将每个列表提供给每列。

问题是我的页面是动态的，元素可能会被删除和创建，我希望元素自动重新定位(例如，如果取出 5，6 应该去 5 的位置，7 会去 6 的位置。 ..)

在 CSS 中有直接的方法来做到这一点吗？谢谢!

Answer 1

flex 也可以提供帮助:(将任何 li 悬停在测试行为旁边以删除)

ul {
  display:flex;
  flex-wrap:wrap;
  margin:20px;
  padding:20px;
  justify-content:center;
  background:gray;
}
li {
  width:30%;
  border:solid;
  margin:1em 1%;
  background:white
}
/* demo purpose */
li:nth-child(even) {
  color:green;
}
/* remove one li */
li:hover + li {
  position:absolute;
  top:-9999px
}

li {
  counter-increment:linbr;
}
li:before {
  content:counter(linbr);
}

<ul>
  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li> <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>  <li><li>
</ul>