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值。

.box {
    display: inline-block
}

Answer 2

您可以使用

display: inline-block;

请参阅我的示例：

<style>
  .outer {
    width: 300px;
  }
  .box {
    width: 80px;
    display: inline-block;
  }
</style>
<div class="outer">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
  <div class="box">E</div>
  <div class="box">F</div>
</div>

我如何允许一堆div自动＆＃34; linebreak＆＃34;

2 个答案: