Fiddle

HTML：

<body>
   <div class="content"></div>
   <div class="content"></div>
   <div class="content"></div>
</body>

CSS：

body {
    min-width: 300px;
}

.content {
    width: 100px;
    height: 100px;
    background: blue;
    float: left;
    margin-left: calc((100% - 300px) / 4);
}

Answer 1

不幸的是没有。你可以用一种方式来＆＃34;几乎＆＃34;通过为每个.content使用包装器div来使它成为那样，并将包装器设置为主体宽度的三分之一。在每个包装器中，您将蓝色框放在中心位置。其缺点是蓝色框之间的距离是外部蓝色框到身体边界的距离的两倍。

＆＃13;

* {
    margin: 0;
    padding: 0;
    border: 0;
}
body {
    min-width: 300px;
    width: 100%;
}
.content-wrapper {
    width: 33.3333%;
    text-align: center;
    float: left;
}
.content {
    width: 100px;
    height: 100px;
    background: blue;
    margin: 0 auto;
}

＆＃13;

<body>
    <div class="content-wrapper"><div class="content"></div></div>
    <div class="content-wrapper"><div class="content"></div></div>
    <div class="content-wrapper"><div class="content"></div></div>
</body>

＆＃13;

Answer 2

我摆弄了一下，几乎找到了解决方案：

Fiddle

<强> HTML：

<body>
    <div id="wrap">
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
        <div class="content"></div>
    </div>
</body>

<强> CSS：

body {
    margin: 0;
}
#wrap {
    text-align: justify;
}
.content {
    width: 100px;
    height: 100px;
    background: blue;
    display: inline-block;
}
#wrap:before {
    content:"";
    display: inline-block;
}
#wrap:after {
    content:"";
    width:100%;
    display: inline-block;
}

如果可能有多个伪元素，我们可以生成一个空的内联块（相同的＆＃34;空字＆＃34;和：之前）：after（1）和宽度为100％的元素as：after（2）。

好吧，我无法让它发挥作用。但感谢Paul的回答，感谢chipChocolate.py和myfunkyside进行编辑！

如何在没有计算的情况下实现这种等距布局？

Fiddle

2 个答案:

Fiddle