同等間隔的DIV也從父母的邊界

我需要內聯DIVs彼此等間隔，並且另外在邊界和行中的第一（或最後）DIV之間。我使用Fluid width with equally spaced DIVs上的解決方案。它給了我DIV之間相等的間距，但是左邊的DIV貼在左邊，右邊的DIV貼在右邊。我希望它與邊界的距離相等，因爲它們彼此相距不遠。同等間隔的DIV也從父母的邊界

更新：內容DIV是由Django動態創建的，所以我不能說他們有多少人會在那裏（1到4之間）。

如何在兩側創建額外的空間，這將等於DIV之間的距離？

這裏是HTML：

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

來源

2012-10-03 Marek

而問右後這個問題，我想出了答案（有多諷刺意味？）。我會分享它，以防有人需要它。

我所做的是在第一個和最後一個內容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; 
    }

來源

2012-10-03 21:43:01 Marek

你可以使用一定比例的盒子佈局和填充，像這樣（我只是用10％的間隔，但可以調整根據您的需求）：

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

來源

2012-10-03 21:41:01 jenjenut233

確定。我沒有具體說一件事。我需要它獨立於內容DIV的數量，因爲這些將由Django動態創建。我會更新這個問題。對於兩個內容DIV，您的建議看起來不太好，並且需要更改填充。 – Marek

你的寬度20％對於不同數量的列也不會看起來好，所以我假設你使這個數字成爲動態的（相對於列輸出的數量），並且可以對外部填充進行相同操作。感謝您的更新。 – jenjenut233

當我得到多行的時候，如果最後一行（有1,2或3個DIV）會得到更大的DIV，那麼看起來不會很好。 – Marek

同等間隔的DIV也從父母的邊界

回答

相關問題