html - 如何展开所有内联 block div 以填充父级？

Question

如果我有这样的东西

<div class="A">
    <div class="B"></div>
    <div class="C"></div>
</div>

CSS

.B, .C {
    display:inline-block;
}

对于 B 和 C，宽度包裹了它的内容，并没有完全填满 A 的宽度。但是，如果我将其宽度设置为 100%，则每个宽度都等于 A 的宽度，然后将 A 扩展到其原始宽度的两倍。

我怎样才能改变它，使 B 的宽度 + C 的宽度 = A 的原始宽度。

基本上增加 B 和 C 的宽度，使其填满 A 的宽度，但保持它们内联。

有人知道吗？

谢谢

Answer 1

最好的用例是使用 Flexbox，因为你说它们是动态的:

.A {border: 1px solid #99f;}
.A div {border: 1px solid #999; height: 10px;}

/* Flex Box */
.A {display: flex;}
.A div {flex: auto;}

Two:
<div class="A">
  <div class="B"></div>
  <div class="C"></div>
</div>

Three:
<div class="A">
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
</div>

Random:
<div class="A">
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
  <div class="B"></div>
  <div class="C"></div>
  <div class="D"></div>
</div>