根據靜態寬度容器設置div元素寬度的數量

Question

我想根據它們的容器寬度相應地設置div元素寬度的寬度。但是，號碼會改變，所以寬度將需要相應調整。這裏是一個CSSDeck鏈接解釋清楚的情況：

http://cssdeck.com/labs/hvmkapkd

正如你可以看到，這兩個容器是相同的（需要），還他們有模塊化的內容（<div>元素）（也需要）。保持相同的結構，是否可以使用CSS自動調整div的寬度，以填充整個容器？

然後第一個容器中的每個項目都有33.333％的寬度，第二個容器中的每個項目都有20％的寬度。

Answer 1

我在發佈問題後發現瞭解決方案。 設置.container元素爲table並將其設置爲table-cell。

鏈接上面更新，但這裏是鏈接再次反正： http://cssdeck.com/labs/hvmkapkd

Answer 2

給柔性盒概念的機會（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

.container{ 
    height: 100px; 
    width: 100px; 
    background-color: lightgray; 
    margin: 20px; 


/* flexbox setup */ 
    display: -webkit-flex; 
    -webkit-flex-direction: row; 

    display: flex; 
    flex-direction: row; 
} 

.container > div { 
    height: 100%; 

/* flexbox setup */ 
    -webkit-flex: 1 1 auto; 
    flex: 1 1 auto; 
} 

（http://cssdeck.com/labs/full/hvmkapkd）