html - 如何让一堆div自动 "linebreak"

Question

我有一组 div.box 对象，它们位于一个大容器 div#boxes 中。像这样:

/-------------\
|             |
| [A] [B] [C] |
|             |
| [D] [E] [F] |
|             |
\-------------/

但是，我希望能够简单地列出框 A .. F 并根据外框的有效宽度自动完成 C 和 D 之间的“换行”。

我尝试了 display: 的不同变体。我想到了一个 .box {display: inline; } 应该可以工作，但是由于某种我完全无法理解的原因，这会导致所有框显示在一条垂直线上，即使至少两个框应该放在一行中。我还尝试了 div#boxes { display: table; 的组合} 和 div.box { display: table-cell; }。使所有框在一条水平线上对齐(这是我所期望的)。

目前，我的盒子都是一样的大小，外盒的大小是固定的，但我想允许更灵活的布局。

Answer 1

使用inline-block值(value)。

.box {
    display: inline-block
}