Как дать равный интервал между отдельными изображениями по прямой линии в CSS?

Question

У меня есть скриншот, как показано ниже, который я должен скопировать в HTML / CSS.

В данный момент я могу воспроизвести это в fiddle .

В скрипте я не могу дать достаточный интервал между отдельными изображениями .

В скрипте у меня такое ощущение, что проблема в следующем коде CSS:

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

Постановка задачи:

Как указывалось выше, в скрипке я не могу дать одинаковое расстояние между отдельными изображениями .

Мне интересно, какие изменения я должен сделать в скрипке, чтобы я мог измерить достаточное расстояние между отдельными изображениями.

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 .