알 수없는 너비와 자식 요소 수를 가진 정렬 된 격자

Question

알 수없는 자식 요소 수와 알 수없는 너비로 완벽하게 정렬 된 격자를 만들려고합니다. 각 요소에는 다른 단어가 들어 있습니다. <div></div>에있는 단어 사이의 공백이 같아야합니다. 여기

<div class="grid"> 
    <div>nhdsgf</div> 
    <div>sdfghfgjsdf</div> 
    <div>xcfgcvb</div> 
    <div>dfhhfg</div> 
</div> 

.grid 
{ 
    font-family:"arial"; 
    font-size: 12px; 
    width:250px; 
    padding:10px; 
    background:#46d246; 
    text-align:justify; 
} 

.grid > div 
{ 
    display:inline-block; 
    padding:3px; 
    background: #228f22; 
    margin:2px; 
    color: #fff; 
} 

은 예입니다 http://jsfiddle.net/CeBdP/

Answer 1

추가 그러나 CSS3를 사용하여 해키 솔루션이 어쩌면 조금 '글꼴 크기 : 0;' 부모 div에 더 나은 결과를 얻을 수 있습니다. 일부 오래된 브라우저가 중단 될 수 있습니다. 훨씬 더 강력한 결과를 얻으려면 javascript를 사용하는 것이 좋습니다. 나는 당신이 만들려고하고 있지만 산세의 자바 스크립트를 할 수있는 방법은 없습니다 내가 http://masonry.desandro.com

.grid 
{ 
font-family:"arial"; 
width:250px; 
padding:10px; 
background:#46d246; 
text-align:justify; 
font-size:0; 
} 

.grid > div 
{ 
display:inline-block; 
padding:3px; 
background: #228f22; 
margin:2px; 
color: #fff; 
font-size: 12px; 
}