html - 如何在 css 中以直线形式在各个图像之间提供相等的间距？

Question

我有如下所示的屏幕截图，我必须在 HTML/CSS 中复制它。

此时此刻，我可以在 fiddle 中复制它.

在 fiddle 中，我无法在各个图像之间提供相当大的间距。

在fiddle中，我有一种感觉，下面的CSS代码有问题:

.et_pb_row {
    position: relative;
    width: 80%;
    max-width: 1080px;
    margin: auto;
}

问题陈述:

如上所述，在 fiddle 中，我无法在各个图像之间提供等量的间距。

我想知道我应该在 fiddle 中做些什么改变，以便我能够在各个图像之间提供相当大的间距。

Answer 1

根据您需要支持的浏览器，您可以为此使用 flexbox。 因此，如果您有以下 html:

<div class="container">
  <img src="" />
  <img src="" />
  <img src="" />
  <img src="" />
</div>

然后编写如下css:

.container {
  display: flex;
  justify-content: space-between;
}

参见 mdn更多示例。