изменить размер 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 DIV». Как я могу решить эту проблему?

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; 
}