1

我需要内联 DIV 在彼此之间等距间隔，另外还需要在边框和行中的第一个（或最后一个）DIV 之间。我使用在具有等间距 DIV 的流体宽度上找到的解决方案。它使 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;
}
4

2 回答 2

1

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

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

于 2012-10-03T21:41:01.050 回答
1

在问完这个问题之后，我就找到了答案（多么讽刺？）。我会分享它以防有人需要它。

我所做的是在第一个和最后一个内容 DIV 之前创建宽度为 0 的间隔 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;
    }
于 2012-10-03T21:43:01.720 回答