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％以获得更好的想法;）