如何实现div元素的多行独立布局？

首先修正你提供的HTML代码中的问题：

• 自定义<top>、<middle>、<bot>并非标准HTML标签，建议替换为标准容器标签（如<div>）以保证兼容性
• 代码中存在标签闭合错误：<bot>内的</middle>应为</bot>

修正后的基础HTML结构如下：

<div class="top-container">
  <div class="top">test</div>
  <div class="top">test</div>
  <div class="top">test</div>
</div>
<div class="middle-container">
  <div class="middle"><p>test</p></div>
  <div class="middle">test</div>
  <div class="middle">test</div>
</div>
<div class="bot-container">
  <div class="bot"><p>test</p></div>
  <div class="bot">test</div>
  <div class="bot">test</div>
</div>

下面介绍几种实现多行独立布局的常用方案：

1. Flexbox布局（推荐） #

Flexbox是现代布局方案，灵活易实现，能快速完成多行独立排列，还能轻松控制容器内元素的对齐方式。

CSS代码： #

/* 全局重置，消除默认边距和内边距 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 每个容器占满一行，内部元素可灵活排列 */
.top-container, .middle-container, .bot-container {
  width: 100%;
  margin: 10px 0; /* 容器之间的间距 */
  display: flex;
  gap: 10px; /* 容器内div元素的间距 */
  padding: 0 10px;
}

/* 容器内的div元素平分宽度 */
.top, .middle, .bot {
  flex: 1;
  padding: 15px;
  border: 1px solid #ccc;
}

2. Grid布局 #

Grid布局适合更复杂的二维布局场景，对于多行独立布局同样适用，可精确控制行列结构。

CSS代码： #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-container, .middle-container, .bot-container {
  width: 100%;
  margin: 10px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 分成3列，每列宽度相等 */
  gap: 10px;
  padding: 0 10px;
}

.top, .middle, .bot {
  padding: 15px;
  border: 1px solid #ccc;
}

3. 传统Block布局（兼容旧浏览器） #

如果需要兼容IE等旧浏览器，可以使用浮动+清除浮动的方式实现：

CSS代码： #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.top-container, .middle-container, .bot-container {
  width: 100%;
  margin: 10px 0;
  padding: 0 10px;
  overflow: hidden; /* 清除浮动 */
}

.top, .middle, .bot {
  float: left;
  width: calc(33.333% - 7px); /* 计算宽度，减去间距 */
  margin-right: 10px;
  padding: 15px;
  border: 1px solid #ccc;
}

/* 最后一个元素去掉右边距 */
.top:last-child, .middle:last-child, .bot:last-child {
  margin-right: 0;
}

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