0

我正在开发一个需要这种布局的小部件:

在此处输入图像描述

让我们假设上面显示的每个项目都是相同的小部件,但整体宽度不同。

深绿色部分是小部件项目,排列在特定宽度的列中。

我的问题是在每列之间实现液体间距,即浅绿色区域。

另请注意,当小部件无法容纳每个项目时,它会将它们扔到下一行 - 通常使用 CSS 实现float:left

重要的是,这仍然是流动的,因为小部件宽度会根据窗口宽度而变化。

编辑:我需要的似乎是证明跨度元素(而不是文本)。我尝试使用 CSS text-align: justify;,但失败了

4

2 回答 2

1

我认为text-align: justify;技术对你来说是完美的。

可以在这里看到一个活生生的例子 - http://jsfiddle.net/xbmkr/7/

注意这里红块之间的距离是自动的,不是由任何margins 设置的。尝试将inline-block lis 的宽度设置为 30% 或 20% 以获得更好的想法;)

于 2012-08-07T14:18:38.893 回答
0

您可以尝试百分比保证金:http: //jsfiddle.net/6w2qj/1/

于 2012-08-07T11:19:38.650 回答