根據其子div調整div大小

Question

我想構建一些包含一些sub_div的彈出窗口。問題是，當我調整我的窗口在我的彈出窗口留下一些空白。我在這裏做一個例子：

http://jsfiddle.net/qd5kbxc7/

<div id="all"> 
     <div id="sub_all"></div> 
     <div id="sub_all"></div> 
     <div id="sub_all"></div> 
     <div id="sub_all"></div> 
     <div id="sub_all"></div> 
    </div> 

#all { 
    background:#ccc; 
    width: auto; 
    display:table; 

} 

#sub_all { 
    background:#ff0000; 
    float:left; 
    margin-left:10px; 
    margin-bottom:5px; 
    width:30px; 
    height:30px; 

} 

，所以當你調整到更小的尺寸有時會出現較大的空白處，在「#ALL格」。我該如何解決這個問題？

Answer 1

當您使用父div的表格佈局時，應該使用display：table-cell作爲子div。對於任何數量的孩子，這將默認給你一個相等的間距。

見的jsfiddle這裏：http://jsfiddle.net/83gdw0uq/

HTML：

<div id="all"> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
    <div class="sub_all"></div> 
</div> 

CSS：

#all { 
    background:#ccc; 
    width: 100%; 
    display:table; 
    border-spacing: 10px 5px; /*first parameter is horizontal spacing/second is vertical spacing*/ 
} 

.sub_all { 
    background:#ff0000; 
    display:table-cell; 
    height:30px; 
}