Почему контент вылазит за высоту контейнера?
Почему высота не подстроилась под размер содержимого?
HTML
<section class="gallery"> <div class="container"> <div class="gallery__inner"> <div class="gallery__column gallery__column-1"> <div class="gallery__item gallery__item-1"> <img src="images/gallery-img-1.png" alt=""> </div> <div class="gallery__item gallery__item-6"> <img src="images/gallery-img-6.png" alt=""> </div> <div class="gallery__item gallery__item-10"> <img src="images/gallery-img-10.png" alt=""> </div> </div> <div class="gallery__column gallery__column-2"> <div class="gallery__row gallery__row-1"> <div class="gallery__item gallery__item-2"> <img src="images/gallery-img-2.png" alt=""> </div> <div class="gallery__item gallery__item-3"> <img src="images/gallery-img-3.png" alt=""> </div> <div class="gallery__item gallery__item-4"> <img src="images/gallery-img-4.png" alt=""> </div> </div> <div class="gallery__row gallery__row-2"> <div class="gallery__item gallery__item-7"> <img src="images/gallery-img-7.png" alt=""> </div> <div class="gallery__item gallery__item-8"> <img src="images/gallery-img-8.png" alt=""> </div> </div> <div class="gallery__row gallery__row-3"> <div class="gallery__item gallery__item-11"> <img src="images/gallery-img-11.png" alt=""> </div> <div class="gallery__item gallery__item-12"> <img src="images/gallery-img-12.png" alt=""> </div> </div> </div> <div class="gallery__column gallery__column-3"> <div class="gallery__item gallery__item-5"> <img src="images/gallery-img-5.png" alt=""> </div> <div class="gallery__item gallery__item-9"> <img src="images/gallery-img-9.png" alt=""> </div> <div class="gallery__item gallery__item-13"> <img src="images/gallery-img-13.png" alt=""> </div> </div> </div> </div> </section> |
<section class="gallery"> <div class="container"> <div class="gallery__inner"> <div class="gallery__column gallery__column-1"> <div class="gallery__item gallery__item-1"> <img src="images/gallery-img-1.png" alt=""> </div> <div class="gallery__item gallery__item-6"> <img src="images/gallery-img-6.png" alt=""> </div> <div class="gallery__item gallery__item-10"> <img src="images/gallery-img-10.png" alt=""> </div> </div> <div class="gallery__column gallery__column-2"> <div class="gallery__row gallery__row-1"> <div class="gallery__item gallery__item-2"> <img src="images/gallery-img-2.png" alt=""> </div> <div class="gallery__item gallery__item-3"> <img src="images/gallery-img-3.png" alt=""> </div> <div class="gallery__item gallery__item-4"> <img src="images/gallery-img-4.png" alt=""> </div> </div> <div class="gallery__row gallery__row-2"> <div class="gallery__item gallery__item-7"> <img src="images/gallery-img-7.png" alt=""> </div> <div class="gallery__item gallery__item-8"> <img src="images/gallery-img-8.png" alt=""> </div> </div> <div class="gallery__row gallery__row-3"> <div class="gallery__item gallery__item-11"> <img src="images/gallery-img-11.png" alt=""> </div> <div class="gallery__item gallery__item-12"> <img src="images/gallery-img-12.png" alt=""> </div> </div> </div> <div class="gallery__column gallery__column-3"> <div class="gallery__item gallery__item-5"> <img src="images/gallery-img-5.png" alt=""> </div> <div class="gallery__item gallery__item-9"> <img src="images/gallery-img-9.png" alt=""> </div> <div class="gallery__item gallery__item-13"> <img src="images/gallery-img-13.png" alt=""> </div> </div> </div> </div> </section>
CSS
.gallery { } .gallery__inner { display: flex; } .gallery__column-1 { display: flex; flex-direction: column; gap: 1%; } .gallery__column-2, .gallery__column-3 { display: flex; flex-direction: column; } .gallery__column-2 { margin: 0 0.8%; } .gallery__column-3 { gap: 2%; } .gallery__item img { max-width: 100%; min-height: 100%; object-fit: cover; } .gallery__row { display: grid; } .gallery__row-1 { grid-template-columns: 1.2fr 2fr 2fr; grid-template-rows: 1fr; justify-items: center; gap: 2%; } .gallery__row-2 { grid-template-columns: 1.5fr 2fr; grid-template-rows: 1fr; justify-items: center; align-items: center; gap: 5%; margin: 1.1% 0; } .gallery__row-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: end; gap: 2%; margin-top: -2%; } .gallery__item-7 { margin-left: 5%; margin-bottom: -6%; } |
.gallery { } .gallery__inner { display: flex; } .gallery__column-1 { display: flex; flex-direction: column; gap: 1%; } .gallery__column-2, .gallery__column-3 { display: flex; flex-direction: column; } .gallery__column-2 { margin: 0 0.8%; } .gallery__column-3 { gap: 2%; } .gallery__item img { max-width: 100%; min-height: 100%; object-fit: cover; } .gallery__row { display: grid; } .gallery__row-1 { grid-template-columns: 1.2fr 2fr 2fr; grid-template-rows: 1fr; justify-items: center; gap: 2%; } .gallery__row-2 { grid-template-columns: 1.5fr 2fr; grid-template-rows: 1fr; justify-items: center; align-items: center; gap: 5%; margin: 1.1% 0; } .gallery__row-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; align-items: end; gap: 2%; margin-top: -2%; } .gallery__item-7 { margin-left: 5%; margin-bottom: -6%; }
Дополнительно:
Потому что не поместилось.
Научитесь делать песочницы на codepen.io с видимой проблемой и минимальным кодом, достаточным для её иллюстрации.
Перед тем как задавать что-то в процентах, имеет смысл выяснить от чего эти проценты считаются.
У вас проблема не в верстке, а в геометрии с арифметикой. Сумму заданных вами размеров вообще невозможно вычислить.
gap в процентах приводит к проблемам и по горизонтали, а уж по вертикали почти всегда. За исключением фиксированной высоты.
Отступы в процентах считаются от ширины родителя. Даже вертикальные.
В итоге у вас там написана дичь.
Т.е. сначала нужно разобраться с тем, что вам нужно, в формулировках на родном языке. Потом с геометрией. И только потом писать свойства. И/или js к ним в помощь.
Можно начать читать вот отсюда https://learn.javascript.ru/height-percent
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Проблема с вылезанием контента за пределы контейнера может иметь несколько причин, и важно исследовать каждую из них для нахождения оптимального решения.
1. Переполнение контента: Если контент внутри контейнера слишком большой для отображения в нем, то он может вылезти за его пределы. Убедитесь, что контейнер имеет достаточную высоту для отображения всего контента.
2. Не корректные стили CSS: Проверьте CSS стили вашего контейнера и убедитесь, что вы не используете свойства, которые могут привести к переполнению контента, такие как `overflow: hidden` или `overflow: auto`. Вместо этого, используйте `overflow: auto` для добавления полос прокрутки, если контент не помещается в контейнер.
3. Некорректное позиционирование элементов: Если элементы внутри контейнера позиционированы абсолютно или фиксированно, они могут вылезать за его пределы. Убедитесь, что элементы внутри контейнера правильно расположены и не перекрывают друг друга.
Пример кода на PHP для применения стилей CSS к контейнеру:
<div style="height: 200px;overflow: auto"> <!-- Ваш контент здесь --> </div>
После тщательного анализа и исправления вышеупомянутых причин, вы должны быть в состоянии предотвратить вылезание контента за пределы контейнера.