我有一组 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; }
。使所有框在一条水平线上对齐(这是我所期望的)。
目前,我的盒子都是一样的大小,外盒的大小是固定的,但我想允许更灵活的布局。
最佳答案
使用inline-block值(value)。
.box {
display: inline-block
}
关于html - 如何让一堆div自动 "linebreak",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27172175/