html - 防止边距将元素推出容器

Question

我无法在固定宽度的容器(灰色)内安装三个内联 block (黑色)。这些 block 有边距(橙色)，问题是最后一个 block 被插入下一行，即使实际元素(黑色)仍在其容器(灰色)内。

我希望当实际 block 在容器外部时将 block 插入下一行，而不是边距。我该怎么做？

引用图片:

编辑:我发现的一个解决方法是将 block 包装到另一个宽度足以覆盖右边距的容器中。

Answer 1

已更新

这是改进后的 fiddle :http://jsfiddle.net/CKQLE/3/

这里的几个关键样式是:

text-align: justify; 在容器上均匀分布包含元素内的元素。

font-size: 0; 删除内联 block 元素附带的空白。

这个 block :

.container:after{
  content: "";
  width: 100%;
  display: inline-block;
}

处理元素溢出。