让div有20%的宽带填在每一个之间，但不是左边的第一或权的最后一个

Question

让我们说，我已经有了这种布局，以建立：

假设的文本和格在同一div，并为此共享一个宽约990px，我怎么可以动态使这个网格有平等的宽列，没有固定的宽?

我可以每 div 要 width:20%, 但然后他们就会行了直接的下一个彼此而不是隔开。 http://jsfiddle.net/97H3P/

我可以每 div 要 width: 20%, box-sizing: border-box, ， padding: 0 20px, 但然后会有一个20像素之间的间隙的边缘线和边缘第一个和最后一个 div. http://jsfiddle.net/97H3P/1/

我可以设立各个 div 要 box-sizing: border-box;, width: 20% 和 padding-right: 20px, ，然后在第5div，设置 padding-right: 0;, 但然后第五div宽于其余的。 http://jsfiddle.net/97H3P/2/

我可以第一个四 divs每个行为 box-sizing: border-box;, width:20.8%, 第五， width: 16.8%, ，然后 padding-right: 20px 他们所有人，但这一数学只能作出的990px宽度。 http://jsfiddle.net/97H3P/3/

有没有更好的方式做到这一点？我找不到任何优雅的解决方案。

谢谢。

更新：几分钟，我很感兴趣CSS3的 column-count 功能，但后来我意识到，它只不会上到下，不左到右，这是多么需要这一命令。

Answer 1

这里的 一个非自举例，我已经勾勒出了迅速。

虽然使用引导课程。

关键是通过使用 position: relative 和 box-sizing: border-box

它也是有点反应。

Answer 2

你应该看看弹性盒 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

关于如何使用一些额外的div为隔板? 小提琴

HTML

<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>
<div class="spacer"></div>
<div></div>

CSS

div {
    background: #000;
    height: 200px;
    float: left;
    opacity: 0.2;
    width: 18%;
}

div.spacer{
    opacity: 1;
    width: 2.5%;
}