Как остановить объекты (посты) от наложения друг на друга

Я пытаюсь создать целевую страницу блога, однако посты продолжают перекрываться другим содержимым. Как я могу остановить эти объекты от наложения друг на друга? Я приложил изображение того, как выглядит фронтенд для лучшего понимания.

Вот как выглядит фронтенд

Вот мой index.html

Я пробовал добавлять желоба, поля и отступы. Но ничего не помогает

Ваши изображения превышают ширину коробки, но вы не справляетесь с этим, поэтому они переполняются.

Вы можете добавить css, чтобы убедиться, что изображения ограничены. Добавьте класс к вашим изображениям

<img src="{{post.image.url}}" class="post_img">

Затем определите его в своем css. Установка max-width в 100% ограничивает размер родительского контейнера, но позволяет использовать изображения меньшего размера. Использование ширины вместо этого растянет маленькие изображения.

.post_img {
    max-width:100%;
    height: auto;
    Object-fit: contain:
}

Я установил Height auto для старых браузеров. Вы также можете использовать object-fit для дальнейшего определения поведения и посмотреть, как это работает.

Вернуться на верх