CSS/HTML新手求助：如何实现每行3个盒子的多行排列？

针对你的问题，推荐两种简单易上手的现代CSS布局方案，新手也能快速掌握：

方法1：Flexbox布局（灵活易控） #

给盒子的父容器设置Flex属性，让盒子自动换行：

HTML结构示例 #

<div class="box-container">
  <div class="box">盒子1</div>
  <div class="box">盒子2</div>
  <div class="box">盒子3</div>
  <div class="box">盒子4</div>
  <div class="box">盒子5</div>
  <div class="box">盒子6</div>
  <div class="box">盒子7</div>
  <div class="box">盒子8</div>
  <div class="box">盒子9</div>
</div>

CSS代码 #

.box-container {
  display: flex; /* 启用Flex布局 */
  flex-wrap: wrap; /* 一行放不下时自动换行 */
  gap: 10px; /* 盒子间的间距，可选 */
  padding: 10px; /* 容器内边距，可选 */
}

.box {
  flex-basis: calc(33.33% - 7px); /* 计算盒子宽度，抵消gap的影响 */
  box-sizing: border-box; /* 确保padding/border不会撑大盒子 */
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
}

• 核心是flex-wrap: wrap，强制盒子在空间不足时换行
• 用calc计算宽度是为了让3个盒子加间距刚好占满一行

方法2：Grid布局（更简洁） #

Grid布局可直接指定每行列数，代码更省心：

CSS代码（HTML结构同上） #

.box-container {
  display: grid; /* 启用Grid布局 */
  grid-template-columns: repeat(3, 1fr); /* 每行3个等宽盒子 */
  gap: 10px; /* 盒子间的间距 */
  padding: 10px;
}

.box {
  box-sizing: border-box;
  padding: 20px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
}

• repeat(3, 1fr)直接定义每行3列，每列自动均分容器宽度，无需手动计算

常见问题排查 #

• 若盒子仍变形，检查是否有内容溢出，可给.box加overflow: hidden或固定高度
• 建议全局设置边框盒模型，避免宽度计算错误：

* {
  box-sizing: border-box;
}

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