多个div并排自动换行

在网页设计中，通常会使用CSS来控制多个`div`元素的布局，使其在一行内并排显示，当容器宽度不足以容纳下所有`div`时，它们会自动换行到下一行。这种布局可以通过不同的CSS属性和布局模式来实现，其中最常用的是浮动（`float`）、内联块（`inline-block`）、弹性盒子（`flexbox`）和网格布局（`grid`）。

以下是使用这些技术实现多个`div`并排自动换行的方法：

1. 使用浮动（`float`）:

.div-container {
  width: 100%;
}

.div-container div {
  width: calc(33.333% - 10px); /* 假设div之间有10px的间距 */
  float: left;
  margin-right: 15px;
  box-sizing: border-box; /* 包含边框和内边距在内的宽度计算 */
}

.div-container div:nth-child(3n) {
  margin-right: 0; /* 每三个div后不添加间距，实现换行 */
}

<div class="div-container">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <!-- ...更多的div... -->
</div>

2. 使用内联块（`inline-block`）:

.div-container {
  font-size: 0; /* 解决inline-block元素间的空白间隙问题 */
}

.div-container div {
  display: inline-block;
  width: 33.333%;
  padding: 10px;
  box-sizing: border-box;
}

.div-container div:nth-child(3n) {
  margin-right: 0;
}

3. 使用弹性盒子（`flexbox`）:

.div-container {
  display: flex;
  flex-wrap: wrap;
}

.div-container div {
  flex: 0 0 33.333%;
  box-sizing: border-box;
  padding: 10px;
}

4. 使用网格布局（`grid`）:

.div-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 三列，每列1份 */
  grid-gap: 15px; /* 网格间隙 */
}

.div-container div {
  /* grid-column: auto; 默认跨越一列 */
}

这些是常见的实现`div`并排显示并自动换行的方法。具体选择哪一种，取决于你的布局需求和个人偏好。每种方法都有其适用场景和优缺点，例如`float`在现代布局中已不推荐使用，因为它会脱离文档流，可能会导致一些布局问题。