根据其子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; 
}