html - 使 div 宽度适合内联 block 子项

Question

我希望容器 div(本例中为#a-container)适合其子元素的宽度，即内联 block div。在此示例中，我希望 #a-container div 的大小仅为 2 .a div。是否可以？ (请使用纯 CSS)

#a-container {
  width: 250px;
  background-color: gray;
}
.a {
  background-color:blue;
  width:100px;
  height: 100px;
  display:inline-block;
}

<div id="a-container">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>

Answer 1

这是一个使用 display: table 和 floating 的 fiddle :http://jsfiddle.net/vqjnoqur/ .

HTML:

#a-container {
  display: table;
  background-color: gray;
}

.a {
  background-color:blue;
  width:100px;
  height: 100px;
  margin: 5px;
  float: left;
}

.a:nth-of-type(2n + 1) {
    clear: left;
}

<div id="a-container">
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
  <div class="a"></div>
</div>