Стили корзины покупок - поведение CSS - PullRequest
Новая
       46

Стили корзины покупок - поведение CSS

0 голосов
/ 27 февраля 2019

Я пытаюсь оформить свою корзину покупок <div>, в которой содержится количество элементов.

Я пытаюсь сделать ее отзывчивой в зависимости от ее содержимого.Должно выглядеть хорошо с innerText.length = 0-5.При количестве предметов, равном 12345, он перемещается на иконку корзины.Он должен расширяться вправо и не должен касаться значка в центре контейнера.

Я могу сделать это с помощью чистого JS с зависимостями (больше символов = меньший размер шрифта), но я хочу сделать это в CSS.

Вот код: 

.cart-box {
        display: inline-block;
        position: relative;

        .cart-image {
          width: 55px;
          height: 50px;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          i {
            margin-right: 5px;
          }
        }
        .cart-counter {
          min-width: 28px;
          padding: 0 4px;
          height: 27px;
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgb(224, 227, 237);
          position: absolute;
          top: 50%;
          right: 0;
          transform: translate(50%, -50%);
          font-size: 14px;
        }
      }
<a href="#" class="cart-container">
  <div class="cart-image">
   <i class="shopping-basket-icon"></i>
  </div>
  <div class="cart-counter">123</div>
</a>

Я думал о переполнении текста к многоточию с Nowrap.

Here is the problem, it should expand to the right

1 Ответ

0 голосов
/ 28 февраля 2019

Вот решение.

Проблема заключалась в том, что вы использовали атрибут right в классе .cart-counter, который заставляет контент расти справа налево.Вам нужно было сделать это задом наперед, слева направо.

Теперь, в следующий раз, пожалуйста, предоставьте правильный код, мне нужно было выяснить, какую библиотеку значков вы использовали для этого значка корзины покупок (FontAwesome) и некоторыепропущенные элементы в HTML* 

.cart-box {
  display: inline-block;
  position: relative;
  background: #723636;
  padding: 15px;
}

.cart-image {
  width: 55px;
  height: 50px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: #D58E32;
  position: relative;
}

i {
  margin-right: 5px;
  color: white;
}

.cart-counter {
  padding: 0 4px;
  height: 37px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(224, 227, 237);
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(0%, -50%);
  font-size: 14px;
  font-weight: bold;
  font-family: sans-serif;
}
...