вот примеры кода и результат
как это исправить?
Или где допущена ошибка
<div class="we">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\gollandskij-vislouhij-krolik-sidit-na-kamne.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\mimimishnyj-krasivyj-ryzhij-krolik.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\photos_of_rabbits_7_24041001.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\post_5ce792e8104fd.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\Rabbits_Hay_552389_1280x853.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\1644922985_42-fikiwiki-com-p-krasivie-kartinki-kroliki-43.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\1644922985_42-fikiwiki-com-p-krasivie-kartinki-kroliki-43.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\1633777911_32-p-domashnii-krolik-foto-32.jpg">
<img class="er" src="D:\Програмирование\Практика\Сайт\www\img\article\GettyImages-93198735-scaled.jpg">
</div>
------------
.we{
width: 100%;
padding: 1%;
margin-top: 5px;
float: left; /*примыкание к левой части*/
}
.er{
display: block;
width: 30.3333%;
float: left; /*примыкание к левой части*/
border-radius: 5px; /*закругление углов*/
margin: 1%;
}
Проблема, которую вы описываете, связана с тем, что блоки с изображениями не заполняют всё доступное пространство внутри родительского контейнера. Это может произойти из-за проблем с размерами изображений или с настройками CSS.
Вот несколько рекомендаций, которые могут помочь исправить эту проблему:
Убедитесь, что изображения имеют подходящие размеры: Убедитесь, что изображения, на которые вы ссылаетесь с помощью атрибута src, имеют подходящие размеры, чтобы заполнить блоки. Если изображения слишком маленькие, они не смогут заполнить блоки полностью. Рекомендуется использовать изображения с достаточно высоким разрешением.
Проверьте CSS-свойства: Убедитесь, что стили CSS для классов .we и .er не конфликтуют с другими стилями на странице. Установите значение box-sizing: border-box; для класса .er, чтобы учесть отступы и рамки при расчете ширины блока. Вы также можете попробовать удалить float: left; для класса .er и использовать display: flex; для класса .we, чтобы элементы автоматически заполнили доступное пространство.
Пример исправленного кода CSS:
.we {
width: 100%;
padding: 1%;
margin-top: 5px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.er {
display: block;
width: 30.3333%;
border-radius: 5px;
margin-bottom: 1%;
box-sizing: border-box;
}
Примените эти изменения к вашему коду и проверьте, заполняются ли блоки с изображениями теперь всё доступное пространство в родительском контейнере. При необходимости вы можете также настроить размеры блоков и отступы в соответствии с вашими требованиями.
вот примеры кода и результат
а там почему-то пустое место оказалось...
(во втором ряду, первое и второе место незаполнены)
помогло)