Как сделать, чтобы картинки были на одной линии?

Question

[tereshock98]

Как сделать, чтобы картинки были на одной линии? У меня вот такая фигня:

Нужно, чтобы картинки были прижаты друг к другу, в то время как 1 и 3 картинка были прижаты к краям экрана. У меня на данный момент такой код:

HTML:

div class="row"
div class="gallery"
img class="img1" src="" alt="img1"
img class="img2" src="" alt="img1"
img class="img3" src="" alt="img1"
/div
/div

CSS:

.img2 {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
}

.img1 {
width: 33%;
float: left;
display: inline-block;
margin: 0;
padding: 0;
}

.img3 {
width: 33%;
display: inline-block;
margin: 0;
padding: 0;
}

Примечание:

Убрал все <> в редакторе, т.к. не показывает код.

Answer 1

[Сергей ZSA]

Использовать flex. Стили такие:

.gallery {
  display: flex;
  justify-content: space-between;
}
.gallery img {width: 33%;}

Зачем каждому изображению давать свой класс и писать одно и то же я честно чет не понял... есть ведь селектор по тегу и всё с ним хорошо. Ширину при желании можно сделать меньше. Но не забывайте, что flex может сплющить ваши картинки и придется писать у них и нужную высоту (у каждой, либо вырезать все одной высоты и всем задать одну и ту же).

Comments

[tereshock98]

У меня все равно между ними есть отступ. А мне нужно, чтобы их не было.

[Дмитрий Гавриленко]

tereshock98: * { margin:0; padding: 0 }

Answer 2

[Сергей]

Если используется inline-block, то в html надо в одну строку расположить их, иначе образуется между ними расстояние.
Можно вместо inline-block использовать float: left и потом в блоке сбрасывать clear: both;

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

Если стили у них одинаковые, зачем разные классы использовать? Или можно все классы через запятую перечислить.

Comments

[Сергей ZSA]

"Флексы лучше не использовать, т.к. еще очень многие браузеры не поддерживают его."
Кто вам такое сказал? Уже все его поддерживают. caniuse.com/#feat=flexbox этого мало? Конечно если нужны питекантропы - то flex не подойдет.

[Денис Белевцов]

Располагать в одну строчку(как и комментировать переносы) - слишком грязно. В CSS родителю font-size: 0; а дочерним элементам display: inline-block; font-size: initial(или 1rem);