Распространение изображений через контейнер

У меня есть серия изображений, которые я хочу распределить равномерно по div. Я видел много вопросов, подобных этому, с очень хорошими ответами, но многие используют для этого добавление/поля, которое оставляет пустые промежутки на левом и правом краях содержащего div.

Прямо сейчас я применяю margin-right для каждого изображения, которое работает, за исключением самого последнего изображения, у которого есть уродливый пустой пробел с правой стороны. Я мог бы просто применить другой класс к последнему изображению без полей, но я надеюсь на более чистое решение. Какие у меня есть другие варианты?

#photo_bar {
 margin-bottom:15px;
 width:785px;
}

#photo_bar a {
 margin-right:7px;
}

.photo_bar_image {
 border-radius:9px;
 background-size: 125px;
 display: inline-block;
 width: 125px;
 height: 125px;
 text-decoration: none;
 transition: background-size 0.2s, background-position 0.2s;
}

.photo_bar_image:hover {
 background-size:140px;
 background-position: -5px -5px;
}

<section id="photo_bar">
 
 
 
</section>
1 ответ

Как насчет этого?

img:last-child {
 // change the margin here!
}

Это будет применено к последнему элементу изображения в контейнере!

Для получения дополнительной информации: https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

licensed under cc by-sa 3.0 with attribution.