css循环多个div，div里面包含文字和小div 如何让文字自动填充一行再换行

要实现CSS中多个`.div`内文字自动填充一行后再换行，你可以使用`display: flex`或者`grid`布局，并结合`flex-wrap`或`grid-auto-flow`属性。下面是两种常见方法：

### 使用Flex布局

<div class="container">
  <div class="item">文字内容1</div>
  <div class="item">文字内容2</div>
  <!-- ...更多的div -->
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap; /* 强制换行 */
}

.item {
  flex: 1; /* 自适应宽度，撑满剩余空间 */
  box-sizing: border-box; /* 包含边框和内边距 */
  margin: 5px; /* 间距调整 */
}

### 使用Grid布局

<div class="container grid-container">
  <div class="grid-item">文字内容1</div>
  <div class="grid-item">文字内容2</div>
  <!-- ...更多的div -->
</div>

CSS:

.container.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自动适应大小，每列至少200px */
  gap: 5px; /* 间距调整 */
}

.grid-item {
  padding: 5px; /* 内边距增加美观度 */
}

在这两个例子中，`auto-wrap`会让`.item`元素在容器不够宽时换到新的一行。记得根据实际需求调整间距、最小尺寸等参数。