Помогите с версткой, не получается контейнер сделать и картинки внутри card и у date_of_lesson добавить padding без изменения размера card
https://drive.google.com/open?id=1Oix-SeBvjsLMJUMyd2wS5qleFFU9dDm4 Есть контейнер с свойствами width: 80%; margin: 0 auto; Но почему-то после создания блока "cards" этот контейнер будто сдвинулся влево, не получается в блоках card сделать что бы картинка была нормального размера и у блока с информацией внутри card был padding.
Ответы (1 шт):
Таки нашелся тот извращенец, скачавший макет из вопроса ;) Макет довольно большой, оставила без изменений на codepen
Ваш "контейнер сдвинулся влево" из-за ширины 44% для блока card. Суммарная ширина внутренних блоков в одну строку составит 88%, так же не применяется ничего для выравнивания блоков card, поэтому появился сдвиг влево. Один из вариантов чтобы выровнять по центру, добавить следующее:
.programms .cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Для картинок используйте обёртку, дополнительный блок, внутри которого будет растянутая картинка:
<div class="card__img-wrapper">
<img src="https://lh3.google.com/u/0/d/1oN7mdPWnr1uHTOmZt460cJAAkSDaFfEJ=w2880-h1144-iv1">
</div>
.cards .card__img-wrapper {
width: 50%;
float: left;
}
.cards .card__img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}