Проблема в пользовательском макете?

Question

Я создал раздел новостей на сайте.Каждый ряд содержит 4 новостные карточки.Как-то не так, как надо.Так что вы можете помочь мне решить эту проблему.

Ссылка на сайт: http://www.shmgroup.com/news.php

Я не могу поделитьсякод.Пожалуйста, проверьте это.

Answer 1

Удалите div с помощью clearfix класса и добавьте фиксированную высоту к элементу

.news-post-container {
    min-height: 500px; // example
}

Answer 2

Эта проблема возникает из-за того, что ваши новостные карточки находятся не на одной высоте.Вы можете добавить min-height для класса новостей-пост-контейнера.

.news-post-container {
    min-height: 450px;
}

Удалить классы clearfix.

Надеюсь, теперь страница новостей будет работать правильно.

удалить классы clearfix

Answer 3

Проблема связана с переменной высотой изображения и содержания текста.Я обновил сайт следующими изменениями CSS.* Добавлена ​​фиксированная высота изображения вместо ширины и выравнивание по центру.* В текстовое описание добавлено 3 строки отсечения и минимальная высота.

.news-thumbnail img {
    max-width: 100%;
    height: 200px;
    display: inline;
}

.news-thumbnail {
    margin: 10px;
    text-align: center;
}
.news-excert p {
    font-size: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 60px;
}