将div宽度调整适应inline-block子元素

Question

我希望容器div (#a-container in this example) 可以适应其内部的内容, 这里是inline-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>

- Arnaud

---

也许是这个：this？ - lmgonzalves

你为什么希望容器比其子元素的总宽度更小？ - Paulie_D

这个问题被错误地标记为重复。所谓的重复问题上的答案不起作用。这里是jsfiddle，展示了从错误链接的重复中应用答案的示例。特别是另一页上的问题只有1个子元素。这个问题有多个子元素，需要不同的答案。 - gman

Answer 1

这里有一个使用display: table和浮动布局的示例：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>

- DRD

---

谢谢。是否有可能扩展此解决方案，使其适用于每行任意数量的div？ - Arnaud

是的，只需将最后一个选择器中的公式从“2n + 1”更改为其他内容即可：http://jsfiddle.net/25hLhLby/。这就是“display: table”的美妙之处，它可以收缩其内容，同时仍然基本上是一个块，也不需要清除浮动。 - DRD

嗨@DRD，我想更多地了解这个**.a:nth-of-type(2n + 1)**，你能解释一下吗？我想知道它的用途。!!! - Himesh Aadeshara