如何用CSS实现每行固定显示5个盒子的布局

我给你推荐两种现代CSS布局方式，比单纯使用float要更灵活可控，完美满足每行显示5个盒子、自动换行的需求：

方法1：Flexbox布局（推荐） #

这是目前最常用的响应式布局方案，代码简洁且兼容性好：

首先给所有盒子添加一个父容器，然后给父容器和盒子设置以下样式：

.box-container {
  display: flex;
  flex-wrap: wrap; /* 超出容器宽度时自动换行 */
  gap: 10px; /* 可选：设置盒子之间的间距，比用margin更省心 */
}

.box {
  border: 4px dotted #32ff00; /* 合并边框写法更简洁 */
  height: 200px;
  /* 计算宽度：总宽度减去4个间距的宽度，再平分给5个盒子 */
  width: calc((100% - 4 * 10px) / 5);
  /* 去掉原来的float: left */
}

对应的HTML结构：

<div class="box-container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

方法2：CSS Grid布局（更直观） #

如果是固定列数的场景，Grid布局会更直观，无需手动计算宽度：

.box-container {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 直接指定5列，每列宽度均等 */
  gap: 10px; /* 可选的间距 */
}

.box {
  border: 4px dotted #32ff00;
  height: 200px;
}

HTML结构和Flexbox方案一致，把所有盒子放在box-container里即可。

关于你原来的float方案 #

你当前用float: left的写法也能实现，但需要严格控制父容器的宽度（比如父容器宽度设为5*170px + 间距），否则容易出现换行异常或空白。而且float布局在响应式场景下的适配性远不如Flexbox和Grid，所以更推荐上面两种现代方案。

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