0

Никак не могу сверстать блок для корзины, всё съезжает да выглядит странно. Вот html:

.cart-item {
  margin-top: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.2);
  border-radius: 26px;
  width: 1170px;
  height: 382px;
}

.cart-item__img {
  width: 354px;
  height: 236px;
  border-radius: 26px;
  margin: 73px 34px 73px 20px;
}

.cart-item__name {
  font-weight: bold;
  font-size: 30px;
  line-height: 37px;
  text-align: center;
  color: #000000;
  margin-top: 66px;
  margin-bottom: 11px;
  margin-left: 148px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

.cart-item__description {
  border: linear-gradientrgba(151, 150, 150, 0) 0% #8F8F8F 100%;
  font-size: 20px;
  line-height: 25px;
  text-align: center;
  width: 274px;
  color: #000000;
  margin-left: 74px;
}

.cart-item__price {
  font-size: 64px;
  display: inline;
}

.cart-item__price::after {
  content: "₴";
  font-size: 36px;
}

.cart-item__info {
  width: 354px;
  height: 236px;
  border: 1px solid #000000;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 26px;
  margin-left: 34px;
  margin-top: 73px;
}

.del-btn {
  margin-left: 688px;
}

.quantity {
  width: 157px;
  height: 90px;
  border: 1px solid #000000;
  border-radius: 26px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.quantity__text {
  font-size: 20px;
  text-align: center;
}

.quantity__plus {
  font-size: 20px;
  text-align: center;
}

.quantity__number {
  font-size: 26px;
  width: 50px;
  height: 50px;
  border: 1px solid #CACACA;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 26px;
  padding: 11px 17.5px;
}

.quantity__minus {
  font-size: 20px;
  text-align: center;
}
<div class="cart-item">
  <img class="cart-item__img" src="https://via.placeholder.com/354x236" alt="">
  <div class="cart-item__block">
    <div class="cart-item__info">
      <div class="cart-item__name">Капрезе</div>
      <div class="cart-item__description">Класична італійська закуска з молодого сиру моцарелла і помідорів чері. Подається з оливковою олією і бальзамічним оцтом.</div>
    </div>
    <a href="/" class="del-btn">
      <img src="https://image.flaticon.com/icons/png/512/1214/1214594.png?w=826" class="del-img">
    </a>
    <div class="cart-item__quantity">
      <p class="quantity__text">
        Кількість:
      </p>
      <button class="quantity__plus">
        +
      </button>
      <p class="quantity__number">
        1
      </p>
      <button class="quantity__minus">
        -
      </button>
    </div>
    <div class="cart-item__price">
      150
    </div>
  </div>
</div>

Выглядеть должно вот так вот:

Нужный результат

А выглядит вот так:

ужас...

... И я абсолютно не представляю как это фиксить. Вторая рамка вокруг блока с кол-вом имеет width: 157px и height: 90px. Прошу, помогите

2
  • нынче еще верстают в пикселях?
    – teran
    5 фев 2022 в 22:28
  • 3
    Давно такого треша не видел... Взял код поправить, но там такое, что легче было бы просто с нуля сверстать.
    – Pilaton
    5 фев 2022 в 22:47

1 ответ 1

1

Согласен с предыдущими комментариями: к сожалению, Ваш код не годится и править его - это просто не благодарное занятие. Ваша беда в том, что Вы слишком всё привязываете к пикселям, из-за чего у Вас не влазят элементы и об адаптиве здесь не может быть и речи.

Мой Вам совет в общих чертах (это как бы я верстал): возьмите всю общую карточку товара (в Вашем случае, это cart-item) и сделайте её flex-контейнером с помощью свойства display: flex; и разбросайте элементы внутри равномерно по ширине свойством justify-content: space-between;. Далее в HTML делайте, например, 4 обёртки div, которые у Вас будут flex-элементами:

  1. Изображение
  2. Название и описание
  3. Количество
  4. Цена и корзина

Иконку корзины я бы спозиционировал относительно правого верхнего угла самой карточки. Для этого у нее должно быть указано position: absolute;, а у её родителя, относительно которого она позиционируется position: relative;. Далее свойствами top и right выставляйте эту корзину внутри карточки.

Примерно так)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.