如何擴展所有內嵌塊div以填充父項？

Question

如果我有這樣的事情

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

CSS

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

對於B和C，寬度包裹它的內容，不完全填滿的寬度。但是，如果我將其寬度設置爲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>

Answer 2

請注意，這並不像優雅普拉文庫馬爾的答案，但我想我會張貼一個基於表的答案：

.A { 
 
    display: table; 
 
    height: 50px; 
 
    width: 100%; 
 
    border: 2px solid #000; 
 
} 
 
.A > div { 
 
    display: table-cell; 
 
    border: 1px solid #fff; 
 
    background-color: red; 
 
}

Example 1: 
 

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

 
Example 2: 
 

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

 
Example 3: 
 

 
<div class="A"> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
</div> 
 

 
Example 4: 
 

 
<div class="A"> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
</div> 
 

 
Example 5: 
 

 
<div class="A"> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
    <div class="B"></div> 
 
    <div class="C"></div> 
 
    <div class="D"></div> 
 
    <div class="E"></div> 
 
    <div class="F"></div> 
 
    <div class="G"></div> 
 
</div>

同樣，孩子的量是無關緊要的。你可以有多少你需要的。