css - 如何将最小高度属性设置为动态宽度

Question

我试图围绕我在 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>

Answer 1

您可以使用伪元素通过padding-top使元素的height等于width > 以百分比表示(请注意，填充是根据元素的宽度计算的)。

我还使用了 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>