css - 等距 DIV 也来自父边界

Question

我需要内联 DIV 彼此之间的间距相等，另外还需要在行中的边框和第一个(或最后一个)DIV 之间。我使用在 Fluid width with equally spaced DIVs 上找到的解决方案.它让我在 DIV 之间有相等的间距，但左 DIV 粘在左边框上，而右 DIV 粘在右边。我希望它与边界的间距与它们之间的间距相等。

更新:内容 DIV 是由 Django 动态创建的，所以我不能说行中会有多少(1 到 4 之间)。

如何在两侧创建与 DIV 之间的距离相等的额外空间？

这是 html:

    <div class="container">
        <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
            <div class="content">
                <canvas width="130" height="130"></canvas>
            </div>
        </div>

和CSS:

div.container {
    width: 100%;
    text-align: justify;
}


div.content {
    display: inline-block;
    width: 20%;
    margin: 0 auto;
}

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

Answer 1

您可以使用一定百分比的框布局和填充，如下所示(我只使用了 10% 的填充，但您可以根据自己的需要进行调整):

http://jsfiddle.net/XXPwW/2/