css - 使 div 的宽度为 20%，每个 div 之间有填充，但不在第一个的左侧或最后一个的右侧

Question

假设我要构建这个布局:

假设文本和网格位于同一个 div 内，因此共享约 990px​​ 的宽度，我如何动态地使该网格具有等宽的列，而不具有固定宽度？

我可以将每个 div 设置为 width:20%，但随后它们会直接彼此相邻排列，而不是间隔开。 http://jsfiddle.net/97H3P/

我可以将每个 div 设置为 width: 20%、box-sizing: border-box 和 padding: 0 20px，但是线条的边缘与第一个和最后一个 div 的边缘之间会有 20px 的间隙。 http://jsfiddle.net/97H3P/1/

我可以将每个 div 设置为 box-sizing: border-box;、width: 20% 和 padding- right: 20px，然后在第 5 个 div 上设置 padding-right: 0;，但是第五个 div 比其他 div 宽。 http://jsfiddle.net/97H3P/2/

我可以将每行的前四个 div 设置为 box-sizing: border-box;、width:20.8%，第五个是 width: 16.8%，然后是 padding-right: 20px 到所有这些，但这个数学运算只能在 990px​​ 宽度下进行。 http://jsfiddle.net/97H3P/3/

有更好的方法吗？我找不到任何优雅的解决方案。

谢谢。

更新:有几分钟的时间，我对 CSS3 的 column-count 功能很感兴趣，但后来我意识到它只执行从上到下的操作，而不是从左到右的操作，这就是我需要此排序的方式.

Answer 1

Here's我快速绘制了一个非 Boostrap 示例。

即使它使用 Bootstrap 类。

这个技巧是通过使用 position:relative 和 box-sizing: border-box

来实现的

它也有一定的响应能力。