flex容器破坏了边界半径，如何解决这个问题？
flex容器破坏了边界半径，如何解决这个问题？
提问于 2020-09-10 09:19:40
我有我想要的位置，但58周围的圆圈应该是一个完美的圆圈，相反，它是根据容器中的内容进行调整的。我如何解决这个问题？
这是它的样子，这是我需要它看起来像https://i.stack.imgur.com/LgQFI.png的样子
这是JSX
<div className="second-col-container">
<h2>Air Quality Index</h2>
<div className="mod-container">
<span className="index">58</span>
<div className="para-mod">
<span className="mod">Moderate</span>
<div>
Air quality is acceptable; however, for some pollutants there
may be a moderate health concern for a very small number of
people who are unusually sensitive to air pollution.
</div>
</div>
</div>
</div>CSS
.second-col-container {
background-color: white;
width: 250px;
grid-area: air-index;
margin-top: 20px;
border-radius: 10px;
}
.second-col-container h2 {
margin-bottom: 20px;
margin-left: 10px;
}
.para-mod {
font-size: small;
width: 60%;
color: grey;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.index {
margin: 5px 0 0 5px;
color: black;
font-size: xx-large;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
padding: 15px;
border-radius: 100%;
}
.mod-container {
display: flex;
}
.mod {
font-size: large;
color: black;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-09-10 09:32:14
我会从给圆圈一个固定的height和width开始。然后给它一个border-radius of 50%。这将解决第一个问题(使其成为一个完美的圆圈)。
第二个问题是文本居中。给跨度一个display: flex，然后使用align-items: center;和justify-content: center;，就可以了。
.index {
margin: 5px 0 0 5px;
color: black;
height: 50px;
width: 50px;
position: relative;
align-items: center;
justify-content: center;
display: flex;
font-size: xx-large;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
/* padding: 15px; */
border-radius: 50%;
}
Stack Overflow用户
发布于 2020-09-10 09:35:23
在只将display: flex应用于父.mod-container.的情况下，包含2位数字的<span class="index">元素将不断增长，以填充其父容器的内容。
接下来，我使用justify-content: center将.mod-container flexbox内容居中，并使用align-items: flex-start对齐。这似乎与您想要的图像相匹配。(如果需要，我可以将类语法更新为JSX )
.second-col-container {
background-color: white;
width: 250px;
grid-area: air-index;
margin-top: 20px;
border-radius: 10px;
}
.second-col-container h2 {
margin-bottom: 20px;
margin-left: 10px;
}
.para-mod {
font-size: small;
color: grey;
display: flex;
flex-direction: column;
margin-left: 10px;
}
.index {
margin: 5px 0 0 5px;
color: black;
font-size: xx-large;
border-radius: 50%;
border: 3px solid rgb(223, 217, 217);
border-left-color: rgb(255, 170, 11);
border-bottom-color: rgb(255, 170, 11);
padding: 15px;
}
.mod-container {
display: flex;
justify-content: center;
align-items: flex-start;
}<div class="second-col-container">
<h2>Air Quality Index</h2>
<div class="mod-container">
<span class="index">58</span>
<div class="para-mod">
<span class="mod">Moderate</span>
<div>
Air quality is acceptable; however, for some pollutants there
may be a moderate health concern for a very small number of
people who are unusually sensitive to air pollution.
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63821531
复制相关文章
相似问题
腾讯云开发者
