Блог

Главная - Вопросы по программированию - Как установить для свойства min-height значение динамической ширины

Как установить для свойства min-height значение динамической ширины

#css

#css

Вопрос:

Я пытаюсь сделать круг (не овал) вокруг любого содержимого, которое я добавляю внутри div, чтобы создать эффект значка. Я хочу, чтобы размер был динамическим в зависимости от содержимого, и я хочу использовать только CSS. Возможно ли это? То, что у меня есть, приведено ниже.

 .a-circle-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
} 
 <div class="a-circle-badge"><span>2200</span></div>

Ответ №1:

Вы можете использовать псевдоэлемент, чтобы сделать height равным width для элемента, используя padding-top в процентах (обратите внимание, что заполнение вычисляется относительно ширины элемента).

Также я использую и inline-flex контейнер, чтобы ширина элемента была такой же, как и его содержимое — см. Демонстрацию ниже:

 .a-circle-badge {
  display: inline-flex; /* <-- inline flex container */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 10px solid;
  border-radius: 50%;
  padding: 30px;
  margin-top: 20px;
  font-size: 30px;
}

.a-circle-badge span {
  display: flex;
  justify-content: center;
  align-items: center;
}

.a-circle-badge span::before {
  content: '';
  padding-top: 100%; /* <-- will create height = width */
} 
 <div class="a-circle-badge"><span>2200</span></div>
<div class="a-circle-badge"><span>Some text here</span></div>

Комментарии:

1. Я видел аналогичный ответ на это в другом сообщении, однако я не смог заставить его работать. Похоже, секретным соусом, которого мне не хватало, были свойства .a-circle-badge span . Большое вам спасибо за ваше элегантное решение.

Метки: