CSS液柱寬度

Question

我的工作，要求此佈局的窗口小部件：

讓我們想象一下上面顯示的每個項目是相同的組件，但是具有不同的總寬度。

深綠色部分是小部件項目，按特定寬度的列排列。

我的問題是實現每個柱子之間的液體間距，即淺綠色區域。

另請注意，當小部件無法容納每個項目時，它會將它們引發到下一行 - 通常通過CSS float:left實現。

由於窗口小部件寬度根據窗口寬度而變化，所以保持液體狀態很重要。

編輯：我所需要的似乎是證明span元素（而不是文本）。我嘗試使用CSS text-align: justify;，但是it failed。

Answer 1

你可以嘗試的百分比保證金：http://jsfiddle.net/6w2qj/1/

Answer 2

我認爲text-align: justify;技術將是您的最佳選擇。

它的一個實例可以在這裏看到 - http://jsfiddle.net/xbmkr/7/。

請注意，此處紅色塊之間的距離是自動的，不是由任何margin s設置的。嘗試將inline-blockli的寬度設置爲30％或20％以獲得更好的想法;）