如何在 HTML 和 CSS 中创建包含两行文本的响应式圆圈？

问题描述 投票：0回答：1

body {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  border-radius: 50%;
  padding: 20px;
  aspect-ratio: 1 / 1;
}
<body>
  <div class="circle">
    <div>2</div>
    <div>AP</div>
  </div>
  <div class="circle">
    <div>200,000</div>
    <div>AP</div>
  </div>
</body>

为什么 

aspect-ratio
CSS 属性在这里不起作用？当里面的文字足够长时（比如我用 200,000 而不是 2，它就是一个正方形长宽比的完美圆）。但当文本很短时我也需要它工作。

我想避免使用 JavaScript 并硬编码任何宽度或高度，因为圆圈应该完全响应其内部的文本，并且是显示它所需的最小尺寸（同时也是正方形的长宽比）。

html css flexbox responsive-design aspect-ratio
1个回答
0
投票

使用 

2lh

定义等于 2 行内容的最小高度 

.circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #333;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  border-radius: 50%;
  padding: 20px;
  aspect-ratio: 1;
  min-height: 2lh;
}


body {
  display: grid;
  place-content: center;
  margin: 0;
  min-height:100vh;
}
<div class="circle">
  <div>20</div>
  <div>AP</div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.