如何使一行可以容纳多个div

为了让一行可以容纳多个`<div>`元素，你可以采用以下几个方法：

1. **浮动布局（Float Layout）**: 给每个`<div>`设置`float`属性。例如，如果想让它们水平排列，可以将`float`设置为`left`。清除浮动影响其他元素的方法有几种选择，如给包含这些`div`的父元素添加`clear:both`，或者使用伪元素`:after`添加透明`clearfix`。

<div style="float:left; width:20%; margin-right:1%;"></div>

2. **Flexbox布局**（适用于现代浏览器）: 使用CSS Flexbox可以方便地控制元素如何在行内分布。只需将容器设置为`display:flex`，然后调整`flex-grow`, `flex-shrink`, 和 `flex-basis` 属性即可。

.container {
  display: flex;
}

3. **Grid布局**（同样适用于现代浏览器）: CSS Grid允许更精细的网格化布局，创建复杂的行和列结构。设置`.container { display: grid; }` 并定义行数和单元格大小。

4. **避免`display:block`**: 如果所有`<div>`都不希望换行，避免将它们设为`block`展示，而保持默认的`inline-block`或者使用`display:inline-flex`.

5. **自适应容器宽度**：让容器宽度自动填充可用空间，通过`width:100%`并配合百分比单位。

.parent {
  width: 100%;
}

.child {
  width: calc(100% / 3); /* 或者你想定的具体数量 */
}