[英]Creating a perfect circle around a text while using flex & flex-basis to position elements
I have this HTML page and I'm trying to position 8 perfect circles on two rows.我有这个 HTML 页面,我试图在两行上放置 8 个完美的圆圈。 (4 on each) (每个 4 个)
I achieved that using flexbox, but then my circle will be broken.我使用 flexbox 实现了这一点,但是我的圈子会被打破。 I expect this to happen because I don't have a fixed width and height - but the problem is, the circle's dimensions cannot be fixed, because they are set by flex-basis.我希望这会发生,因为我没有固定的宽度和高度 - 但问题是,圆圈的尺寸无法固定,因为它们是由 flex-basis 设置的。
Here's the code:这是代码:
.content-achievements { width: 100%; height: 30rem; position: relative; border: 1px solid black; border-radius: 25px; margin-left: 1.5rem; text-align: center; } .achievements-title { border: 1px solid black; border-radius: 1.5rem; width: 95%; margin: 1.5rem auto; height: 2.5rem; line-height: 2.5rem; } .achievements-list { border: 1px solid black; width: 95%; text-align: center; margin: 0 auto; border-radius: 1.5rem; margin-bottom: 1rem; } .achievements-items { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 20px; margin: 1rem 0; } .achievements-item { display: inline-block; flex-basis: 20%; border-radius: 50%; border: 1px solid #000; line-height: 2rem; }
<div class="content-achievements"> <div class="achievements-title"> Game Achievements </div> <div class="achievements-list"> <ul class="achievements-items"> <li class="achievements-item">achiev1</li> <li class="achievements-item">achiev2</li> <li class="achievements-item">achiev3</li> <li class="achievements-item">achiev4</li> <li class="achievements-item">achiev5</li> <li class="achievements-item">achiev6</li> <li class="achievements-item">achiev7</li> <li class="achievements-item">achiev8</li> </ul> </div> </div>
How can I fix my circles while also keeping this layout?如何在保持此布局的同时修复我的圈子?
Thanks.谢谢。
set a static size that is the same for height and width for all circles elements:为所有圆元素的高度和宽度设置一个相同的静态大小:
.achievements-items {
width: 40px;
height: 40px;
}
It can be done using CSS property aspect-ratio for the circle items:可以使用圆形项目的 CSS 属性 纵横比来完成:
.achievements-items {
aspect-ratio: 1;
}
And adapt main container's height to its new dynamic content height accordingly:并相应地调整主容器的高度以适应其新的动态内容高度:
.content-achievements {
...
height: auto;
...
}
try to use flexbox inside of it use grid for better specify your rows and columns it work with that:尝试在其中使用 flexbox 使用 grid 更好地指定您的行和列:
.achievements-list{
display:flex;
justify-content:center;
justify-items:center;
border:1px solid black;
width:95%;
text-align:center;
margin:0 auto;
border-radius:1.5rem;
margin-bottom:1rem;
}
.achievements-items{
display: grid;
grid-template-columns: auto auto auto auto;
gap: 50px;
margin: 1rem 0;
}
.achievements-item{
list-style-type: none;
width: 60px;
height: 60px;
border-radius: 50%;
border: 1px solid #000;
line-height: 2rem;
}
Back when there was no aspect-ratio
and even now, since it is not yet wildly supported, a common method would be to make three elements instead of one and use a padding-bottom
trick.在没有aspect-ratio
,甚至现在,由于它还没有得到广泛支持,一种常见的方法是制作三个元素而不是一个元素并使用padding-bottom
技巧。 You see, when you set padding
in percentage, it is calculated in relative to the width of the containing block.你看,当你以百分比设置padding
时,它是相对于包含块的宽度计算的。 It is true for vertical padding (top/bottom) as it is for horizontal (right/left).垂直填充(顶部/底部)和水平填充(右/左)都是如此。 This means if you set padding-bottom: 100%
this "100%" will equals the parent container width, not height.这意味着如果你设置padding-bottom: 100%
这个“100%”将等于父容器的宽度,而不是高度。 So we can do this:所以我们可以这样做:
width
外部元素——定义width
height
via padding-bottom
, also has position: relative
中间元素——通过padding-bottom
定义height
,也有position: relative
position: absolute
内部元素——保存内容,也有position: absolute
Below I have added two span
tags for each li
and applied this trick.下面我为每个li
添加了两个span
标签并应用了这个技巧。
* { margin: 0; box-sizing: border-box; } .content-achievements { width: 100%; height: 30rem; position: relative; border: 1px solid black; border-radius: 25px; text-align: center; } .achievements-title { border: 1px solid black; border-radius: 1.5rem; width: 95%; margin: 1.5rem auto; height: 2.5rem; line-height: 2.5rem; } .achievements-list { border: 1px solid black; width: 95%; text-align: center; margin: 0 auto; border-radius: 1.5rem; margin-bottom: 1rem; } .achievements-items { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 20px; margin: 1rem 0; } .achievements-item { display: inline-block; flex-basis: 20%; line-height: 2rem; position: relative; } .achievements-item>span { position: relative; display: block; padding-bottom: 100%; border-radius: 50%; border: 1px solid #000; } .achievements-item>span>span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
<div class="content-achievements"> <div class="achievements-title"> Game Achievements </div> <div class="achievements-list"> <ul class="achievements-items"> <li class="achievements-item"><span><span>achiev1</span></span></li> <li class="achievements-item"><span><span>achiev2</span></span></li> <li class="achievements-item"><span><span>achiev3</span></span></li> <li class="achievements-item"><span><span>achiev4</span></span></li> <li class="achievements-item"><span><span>achiev5</span></span></li> <li class="achievements-item"><span><span>achiev6</span></span></li> <li class="achievements-item"><span><span>achiev7</span></span></li> <li class="achievements-item"><span><span>achiev8</span></span></li> </ul> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.