将div宽度拟合到内联块子节点(每行div的未知数)

Question

我希望容器div(#a在这个例子中)适合width它的子inline-block节点,即div.

div每行的s数是未知的,因为它取决于屏幕的大小.

在这个例子中,我想要的是#a容器右侧没有额外的灰色空间.

可能吗？(纯CSS请)

#a {
    background-color: gray;
}

.b {
    width: 110px;
    height: 110px;    
    display: inline-block;
    background-color: blue;
}

<div id="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
</div>

Answer 1

由于似乎没有纯CSS方法,所以这里有一些快速的JavaScript来完成工作.

1. 暂时将父级display样式更改为inline,以便缩小以适应其内容.
2. 使用getBoundingClientRect()将父级的宽度设置为其缩小到适合的宽度.
3. display通过清除父级的默认样式来恢复它.

片段

var a = document.getElementById('a');
a.style.display = 'inline';
a.style.width = a.getBoundingClientRect().width + 'px';
a.style.display = '';

#a {
  background-color: gray;
}
.b {
  width: 110px;
  height: 110px;
  display: inline-block;
  background-color: blue;
}

<div id="a">
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
  <div class="b"></div>
</div>