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/

Answer 2

在问了这个问题之后，我已经找到了答案（多么具有讽刺意味？）。如果有人需要，我会分享它。

我所做的是在第一个和最后一个内容DIV之前创建0宽度的spacer DIV。这是它的样子：

HTML：

    <div class="container">
        <div class="spacer"></div>
        <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 class="spacer"></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;
    }

    div.spacer {
        display: inline-block;
        width: 0;
    }

同样间隔的DIV也来自父母的边界

2 个答案: