하위 div에 따라 div 크기 조정

Question

일부 sub_div가 포함 된 팝업을 만들고 싶습니다. 문제는 내가 내 팝업 창에서 내 창 크기를 조정할 때 빈 공간을 유지한다는 것입니다. 여기 예를했다 :

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

} 

http://jsfiddle.net/qd5kbxc7/

그래서 당신은 "이 #all div에"거기에 작은 크기 때로는 큰 빈 공간의 크기를 조정합니다. 이 문제를 어떻게 해결할 수 있습니까?

Answer 1

부모 div에 테이블 레이아웃을 사용하는 경우 child div에 display : table-cell을 사용해야합니다. 이렇게하면 기본적으로 모든 양의 어린이에게 동일한 간격이 부여됩니다. 여기

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