Какие стили нужно добавить в card, чтобы каждый элемент в card занимал столько высоты сколько есть в содержимом?
Нужно, чтобы элементы карточки tags, title, author занимали столько высоты, сколько содержимого в элементе. Важно, чтобы карточки по размеру были похожи.
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Моя первая страница</title> </head> <body> <div class="card__list"> <div class="card"> <div class="card__tags"> tags tags tags tags tags tags tags tags tags tags tags tags </div> <div class="card__title"> title title title title title title title title title title title title title title title title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> <div class="card"> <div class="card__tags"> tags </div> <div class="card__title"> title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> <div class="card"> <div class="card__tags"> tags </div> <div class="card__title"> title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> </div> </body> </html> |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Моя первая страница</title> </head> <body> <div class="card__list"> <div class="card"> <div class="card__tags"> tags tags tags tags tags tags tags tags tags tags tags tags </div> <div class="card__title"> title title title title title title title title title title title title title title title title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> <div class="card"> <div class="card__tags"> tags </div> <div class="card__title"> title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> <div class="card"> <div class="card__tags"> tags </div> <div class="card__title"> title </div> <div class="card__line"></div> <div class="card__author"> author </div> </div> </div> </body> </html>
.card__list { display: grid; grid-template-columns: repeat(3, 200px); } .card { display: grid; grid-auto-flow: row; grid-template-rows: 1fr 1fr auto 1fr; border: 3px solid black; } .card__tags { background: lightyellow; } .card__title { background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { background: lightgreen; } |
.card__list { display: grid; grid-template-columns: repeat(3, 200px); } .card { display: grid; grid-auto-flow: row; grid-template-rows: 1fr 1fr auto 1fr; border: 3px solid black; } .card__tags { background: lightyellow; } .card__title { background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { background: lightgreen; }
Дополнительно:
Используй флекс в карточке, а не грид.
.card__tags { flex-grow: 1; background: lightyellow; } .card__title { flex-grow: 1; background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { flex-grow: 1; background: lightgreen; } |
.card__tags { flex-grow: 1; background: lightyellow; } .card__title { flex-grow: 1; background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { flex-grow: 1; background: lightgreen; }
Ответы:
используй флекс примерно так.
- Это почти решило мою задачу:
.card__tags { flex: 1; background: lightyellow; } .card__title { flex: 1; background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { flex: 1; background: lightgreen; }
.card__tags { flex: 1; background: lightyellow; } .card__title { flex: 1; background: lightblue; } .card__line { height: 2px; background: pink; } .card__author { flex: 1; background: lightgreen; }
- убери это
.card__line { height: 2px; background: pink; }
.card__line { height: 2px; background: pink; }
и используй бордер - либо бордер-топ для нижнего элемента, либо бордер-боттом для среднего. Я обновил пример в ответе, посмотри еще раз
- BladeHeroku, и само собой убери из верстки див <div class="card__line"></div>. он не нужен, только ломает отображение.
Можно еще таким способом
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы каждый элемент в карточке (card) занимал столько высоты, сколько есть в его содержимом, можно использовать следующие стили:
.card { display: flex; flex-direction: column; } .card .card-body { flex: 1; }
В данном случае мы используем flexbox для задания стилей карточке. Свойство display: flex; на родительском элементе (.card) устанавливает его как flex-контейнер, а свойство flex-direction: column; задает направление отображения элементов в столбец.
Свойство flex: 1; на элементе с классом .card-body говорит браузеру распределить все доступное пространство в направлении flex-оси (в данном случае по вертикали) между дочерними элементами. Таким образом, каждый элемент внутри карточки будет занимать столько высоты, сколько есть в его содержимом.
Таким образом, добавив эти стили к вашей карточке, вы добьетесь желаемого эффекта, когда каждый элемент будет занимать столько высоты, сколько есть в его содержимом.