Верстка. Изображения. Во втором ряду отображаются не так, как в первом

Question

[goodknight]

Здравствуйте.
Не могу понять причину.

Вот сайт, в разделе "Our Portfolio", элементы из второго ряда отображаются не так, как из первого. Съезжают.

Код, отвечающий за картинки такой:

.row img{
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 100%;
	height: auto;
}

Обязательно надо оставлять "height: auto", чтобы картинки были responsive.
Если, например, поставить фиксированную высоту

.row img{
       height: 300px;
}

То всё нормально, но этот вариант не подходит, т.к. у картинок меняется соотношение сторон, если меняется viewport.

В чем может быть причина?

Answer 1

[Анна Бакурова]

У вас float стоит либо замените на inline block либо через js после каждого третьего блока вставляете

$(".section-2>.row:nth-child(3n)").after('<div class="clear"></div>');

.clear{
            clear: both;
            font-size: 0;
            line-height: 0;
            height: 0;
            overflow: hidden;
        }

или же без js ручками вставляете в Вашем случае это даже лучше

Comments

[goodknight]

Ну js ради этого писать это уже костыль костылей. Да, давно уже заюзал ``display: block``, спасибо. Только не знаю, насколько это "правильно".

Answer 2

[Юрий Лобанов]

Попробуйте какой-нибудь такой вариант codepen.io/iiil/pen/zJrvL
Зачем плодить такое количество классов? пишете класс row, а по сути он является ячейкой, а не строкой.
В Вашем случае такой перенос происходит из-за того, что картинка номер 3 имеет высоту 298 пикселей, а остальные - 299. Ведут себя блоки совершенно нормально в таком случае.

upd: вбейте вместо третьей <img src="images/3.png" style="height: 299px;">
Все будет ок. Но лучше отойти от такой зависимости от размеров картинок.

Comments

[goodknight]

Не понимаю. Ведь в вашем варианте ширина row - 100, а картинки 33. У меня же еще и контент там есть.

[Юрий Лобанов]

@goodknight мой вариант вообще другой, можно и по-вашему сделать. Причину такого поведения я Вам написал.

Answer 3

[Dimitriy]

навскидку два варианта, для модерн:

.row:nth-child(3n) {
  clear:left;
}

для олд:

.row{
  display: inline;
  *zoom: 1;
  display: inline-block;
  .... 
}