将项目列表馈送到3列布局中

feed a list of items into a 3-column layout

本文关键字：3列 布局 项目 列表      更新时间：2024-02-27

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

   1 2 3
   4 5 6
   7 8...

一种方法是在页面上有3列，并将对象划分为3个列表，其中第一个列表包含项目1 4 7，第二个列表包含项2 5 8，依此类推，并将每个列表馈送到每列。

问题是我的页面是动态的，项目可能会被删除和创建，我希望项目自动重新定位（例如，如果取出5个，6个应该放在5的位置，7个会放在6的位置…）

在CSS中有没有一种直接的方法可以做到这一点？谢谢

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>

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

请参阅此jsfiddle

您可以这样做：

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

点击此处查看

我制作了一个脚本，显示当您删除列表中的随机li时它是有效的。

相关文章：