Question

假设我有一个以3列布局显示的框列表，我希望实现类似下面的内容，其中每个数字代表一个固定宽度的框（div）。

   1 2 3
   4 5 6
   7 8...

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

问题是我的页面是动态的，项目可能会被删除和创建，我希望项目能够自动重新定位（例如，如果5个被取出，6个应该转到5＆＃39; s，7个采取6的立场......）

在CSS中有直接的方法吗？谢谢！

Answer 1

是的，只需使用display:inline-block;或float:left;

即可

请参阅此example

Answer 2

你可以这样做：

ul { padding-left: 0;}
li { float: left; width: 30%; list-style: none; background: red; color: #fff; margin: 1%; }

See it here

当您删除列表中的随机li时，我已经创建了一个脚本来显示它。

Answer 3

flex也可以提供帮助：（将所有li悬停在测试行为旁边删除）

combobox

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

将项目列表提供为3列布局

3 个答案: