Как сделать горизонтальную карточку в Html/css ⇐ CSS

[Anonymous]

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

Код: Выделить всё

[img]{{news.0.image}}[/img]

{{news.0.headline}}
Some representative placeholder content for the first slide.


{% for new in carousel %}

[img]{{new.image}}[/img]

{{new.headline}}
Some representative placeholder content for the second slide.


{% endfor %}



Previous



Next



{% for new in carousel_side_top %}




[img]{{new.image}}[/img]

[b]{{new.headline}}[/b]


{{new.timestamp}}

{{new.category}}









{% for min_new in carousel_side %}




[img]{{min_new.image}}[/img]


{{min_new.headline}}

{{min_new.timestamp}}

{{min_new.category}}






{% endfor %}




{% endfor %}

и это все мой CSS

Код: Выделить всё

.body {
height: 100%;
margin: 0;
}

.timestampDiv {
border-right: solid 1.5px black;
width: max-content;
padding-right: 10px;
margin-right: 10px;
}

.mainText {
font-size: 0.9rem;
font-weight: 600;
}

.secondaryText {
color: gray;
font-size: 0.5rem;
display: inline;
}

.card:hover {
background-color: rgb(184, 184, 184);
}

#secondary-container-div {
height: 100%;
}

Буду благодарен, если кто-нибудь исправит код, если возникнут проблемы, или подскажет, как создать лучшую горизонтальную карточку

Подробнее здесь: https://stackoverflow.com/questions/786 ... n-html-css