부모님의 국경에서도 같은 간격의 DIV

Question

인라인 DIV는 서로간에 균등하게 간격을두고 행의 테두리와 첫 번째 (또는 마지막) DIV 사이에 간격이 있어야합니다. Fluid width with equally spaced DIVs에있는 해결책을 사용합니다. 그것은 DIV 사이에 똑같은 간격을 주지만 왼쪽 DIV는 왼쪽 경계에 붙어 있고 오른쪽 DIV는 오른쪽에 붙어 있습니다. 서로 국경에서 똑같이 간격을두고 싶습니다.

업데이트 : 내용 DIV는 Django에 의해 동적으로 만들어 지므로 줄 수에 몇 개가 될지 말할 수 없습니다 (1 ~ 4 사이).

DIV 사이의 거리와 같은면을 추가로 만들려면 어떻게해야합니까?

<div class="container"> 
     <div class="content"> 
       <canvas width="130" height="130"></canvas> 
      </div> 
      <div class="content"> 
       <canvas width="130" height="130"></canvas> 
      </div> 
      <div class="content"> 
       <canvas width="130" height="130"></canvas> 
      </div> 
     </div> 

과 CSS :

div.container { 
    width: 100%; 
    text-align: justify; 
} 


div.content { 
    display: inline-block; 
    width: 20%; 
    margin: 0 auto; 
} 

div.container:after { 
    content: ""; 
    width: 100%; 
    display: inline-block; 
} 

Answer 1

을하는 즉시 질문) 당신의 요구에 맞게 질문을하면서, 나는 대답을 알아 냈다 (얼마나 아이러니 한가?). 다른 사람이 필요로 할 경우에 대비하여 알려 드리겠습니다.

내가 한 일은 첫 번째와 마지막 내용 DIV 앞에 너비가 0 인 스페이서 DIV를 만드는 것입니다. 여기에이 같은 모습입니다 :

HTML :

<div class="container"> 
     <div class="spacer"></div> 
     <div class="content"> 
      <canvas width="130" height="130"></canvas> 
     </div> 
     <div class="content"> 
      <canvas width="130" height="130"></canvas> 
     </div> 
     <div class="content"> 
      <canvas width="130" height="130"></canvas> 
     </div> 
     <div class="spacer"></div> 
    </div> 

과 CSS :

div.container { 
     width: 100%; 
     text-align: justify; 
    } 


    div.content { 
     display: inline-block; 
     width: 20%; 
     margin: 0 auto; 
    } 

    div.container:after { 
     content: ""; 
     width: 100%; 
     display: inline-block; 
    } 

    div.spacer { 
     display: inline-block; 
     width: 0; 
    } 

Answer 2

당신이 좋아 (난 그냥 10 % 패딩을 사용하지만 당신은 조정할 수 있습니다, 일정 비율의 상자 레이아웃 및 패딩을 사용할 수 있습니다 여기에

는 HTML입니다

http://jsfiddle.net/XXPwW/2/