Пытался сделать карточку?

Question

[Super Star]

Здравствуйте. Пытаюсь сделать вот такую карточку:
Вот как у меня получилось: https://jsfiddle.net/xfkub35n/1/ Карточка должна быть 400 на 680, но при добавлении паддигов она увеличивается. Кнопку не получается прижать к низу блока. Я где-то напортачил или вообще всё неправильно сделал.

Как её правильно сделать?

Answer 1

[Ivan Stroykin]

Дополнил ваш код ссылка
Чтобы понять, что да как, просто сравните.
p.s. Рекомендую описывать элементы сверху вниз. К примеру, в вашем случае сначала родитель: "card", ниже дочерние: заголовок, цена, список, кнопка
И зачем "item-price" делать списком?

Comments

[Super Star]

Я впервые такое делаю. Учусь.

[Super Star]

А как это правильно сделать? Я всё сделал неправильно?

[Super Star]

Где можно почитать о том как это можно сделать?

[Ivan Stroykin]

Андрей Рысь: Все с практикой придет. Вот сейчас можете посмотреть на мой пример. Списки нужно использовать только по своему прямому назначению - для списков. Для "item_head", "item-price" и подобных просто параграф (p), либо блок (div). Тут кому как нравится.

[Super Star]

Иван Стройкин: Я думал насчёт Р, но мне показалось что много Р будет не правильно исспользовать. Гуд тогда я заменю в item_head", "item-price" на Р

[Super Star]

Иван Стройкин: мне всё ровно как. главное чтобы было сделано правильно. Я сейчас учусь.

[Ivan Stroykin]

Андрей Рысь: Главное понять для чего нужен тот или иной элемент и в каких ситуациях его нужно использовать. В данном случае, избавившись от списка, мы неплохо так сократили код. Меньше кода + правильный код = залог успеха. Для поднятия знаний рекомендую официальную документацию, или, если плохо с английским, переведенную официальную документацию.
Если интересно, нечего было делать, добавил стили для "что-то тут было"

[Super Star]

Иван Стройкин: А линии которые я добавил спанами? Так можно?

[Ivan Stroykin]

Андрей Рысь: Для начала пойдет. Но лучше будет, к примеру, к "item_head" примерить нужный padding и border-bottom. Тогда эти линии не будут зависеть ни от размера главного блока, ни нужно будет постоянно бегать и править.

[Ivan Stroykin]

Андрей Рысь: обновил пример. Сделал для "item_head". Это грубый пример, там все равно много лишнего получается, но для начала не плохо. Главное понять основную идею: писать код так, чтобы он был правильный, компактный, легко понимаемый, и, если нужно будет что-нибудь изменить (к примеру ширину), пришлось бы менять в как можно меньшем количестве мест. Надеюсь получилось донести мысль?

Answer 2

[Yevhenii K]

box-sizing: border-box; (боксовая модель) для .cart.
Самый простой вариант опустить кнопку, position: absolute; bottom: 0;

Comments

[Super Star]

Если я .card position: relative;, а ссыслке .card a position: absolute; кнопка прижимается к самому низу игнорируя паддинг основного блока(.card). https://jsfiddle.net/xfkub35n/2/ и text-align: center; на неё никак не влияет

[Yevhenii K]

Установите bottom: 10/20/30 px(или сколько вам нужно). и будет вам отступ от нижней границы