多个不规则div 一行排列案例

在网页布局设计中，如果需要让多个不规则大小的 `div` 元素在一行为内自适应排列，可以利用CSS的一些技巧。这通常通过Flexbox或Grid布局来实现，因为这两种模式都支持响应式布局。

1. **Flexbox** (弹性盒子模型)：
- 首先，设置包含这些 `div` 的容器元素为 `display: flex;` 或 `display: inline-flex;`，使其变为弹性容器。
- 然后，对于每个 `div`，可以设置 `flex-grow`, `flex-shrink`, 和 `flex-basis` 属性。例如，`flex: 1;` 可使它们等比例伸缩，`flex-basis: auto;` 让它们按内容自动调整宽度。
- 如果需要水平对齐，可以使用 `justify-content` 属性，如 `justify-content: space-between;` 来让它们均匀分布。

.container {
  display: flex;
  justify-content: space-between;
}

2. **CSS Grid** (网格布局)：
- 同样，将容器设置为 `display: grid;`，并指定列数（如 `grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));`），这会让行充满可用空间，而列宽根据内容自适应。
- 对于每个 `div`，只需设置 `grid-column` 和 `grid-row` 属性即可。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr));
  gap: 10px;
}