HTML库存表格布局问题：如何实现每行12个slot自动换行？

嘿，我完全懂你遇到的困扰——做库存系统时，明明预期每行放12个商品，结果第13到24个没乖乖换行到下一行，反而挤在上一行后面，太闹心了对吧？咱们从最常见的两种布局场景来解决：

---

场景1：用HTML表格（）实现库存 #

如果你的库存是用表格做的，问题大概率出在行元素（

）的分组错误

正确的结构写法 #

每12个

<table class="inventory-table">
  <!-- 第一行：1-12号商品 -->
  <tr>
    <td class="slot">商品1</td>
    <td class="slot">商品2</td>
    <!-- ... 依次添加到第12个商品 -->
  </tr>
  <!-- 第二行：13-24号商品 -->
  <tr>
    <td class="slot">商品13</td>
    <td class="slot">商品14</td>
    <!-- ... 依次添加到第24个商品 -->
  </tr>
</table>

动态生成的情况（比如JS） #

如果是用JavaScript动态渲染商品，记得在循环里计数，每遍历12个商品就创建一个新的

// 模拟24个商品数据
const inventoryItems = Array.from({length:24}, (_, i) => `商品${i+1}`);
const inventoryTable = document.querySelector('.inventory-table');
let currentRow;

inventoryItems.forEach((item, index) => {
  // 每12个商品创建新行，第一个商品时也初始化第一行
  if (index % 12 === 0) {
    currentRow = document.createElement('tr');
    inventoryTable.appendChild(currentRow);
  }
  // 创建商品单元格
  const slotCell = document.createElement('td');
  slotCell.className = 'slot';
  slotCell.textContent = item;
  currentRow.appendChild(slotCell);
});

---

场景2：用Flex布局实现库存（更灵活的现代方案） #

如果不想用表格，用Flex布局会更灵活，只需要给容器设置自动换行属性，再让每个商品单元格占1/12的宽度即可：

CSS代码示例 #

.inventory-container {
  display: flex;
  flex-wrap: wrap; /* 关键：超出容器宽度自动换行 */
  gap: 8px; /* 可选：给商品之间加间距 */
  width: 100%; /* 或者设置固定宽度，比如每个slot是80px，容器就设960px（80*12） */
}

.slot {
  width: calc(100% / 12); /* 让每个单元格自动平分12份宽度 */
  box-sizing: border-box; /* 避免padding/border撑宽单元格 */
  padding: 10px;
  border: 1px solid #ddd;
}

对应的HTML结构 #

<div class="inventory-container">
  <div class="slot">商品1</div>
  <div class="slot">商品2</div>
  <!-- ... 直接放所有24个商品即可，Flex会自动帮你换行 -->
</div>

这样不管你有多少个商品，每满12个就会自动跳到下一行，完全符合你的预期~

内容的提问来源于stack exchange，提问作者user13581693

都塞进了同一个

在同一个

就要包裹在一个独立的

：你可能把所有商品的里，而表格的就是代表一行，所有里自然会挤在一行，不会自动换行。里，比如：：