Изображения веб-страницы не остаются прямыми

Question

У меня возникла проблема, но застрял на этом. Я создаю страницу с пятью изображениями в ней. Страница имеет два stylesheetsnormalize,main. main - моя обычная таблица стилей. А вот образец страницы.

Я хочу, чтобы сделать эту страницу отзывчивым, но когда я изменить размер браузера с малой шириной панели навигации и изображения не остаются прямым это показать предварительный просмотр, как это. Эти все изображения позиция через неупорядоченный список Загрузить Страницу Sample

Answer 1

Я посмотрел на свой CSS и нашел возможную причину проблемы. Это связано с вашим имуществом float:left. Что происходит, когда вы используете это, браузер пытается стекать все слева от вашего экрана. В вашем случае, поскольку один из элементов списка был длиннее (по высоте), чем обычные, он не мог найти место для его размещения. В таких случаях гораздо лучше использовать flexbox. вот как

#gallary{ 
    display: inline-flex; 
    flex-wrap: wrap; 
    margin:0; 
    padding:0; 
    list-style-type: none; 
    } 
    #gallary li{ 
    width:45%; 
    margin:2.5%; 
    background-color: #f5f5f5; 
    color:#bdc3c7; 
    } 

Напротив, этот код пытается расположить элементы в строке и в том случае, когда нет свободного места, он деформирует вокруг и ставит его под ней. display: inline-flex; создает гибкую коробку и flex-wrap: wrap; рассказывает об этом. обратите внимание, что я удалил float:left