Html 如何适应特定子元素的宽度？ 问题
我正在尝试创建一个技能测量仪。Html 如何适应特定子元素的宽度？ 问题,html,css,Html,Css,我正在尝试创建一个技能测量仪。 （我无法问下一个问题为什么，所以我创建了一个新帐户并询问） 当前状态： 我想将元素的宽度与.meter匹配 换句话说，如何将块的标准设置为.meter（子元素）？ （在上面的gif中，img.meter的位置） 我想根据.meter计算保证金。。（现在，figcaption是标准） 由于figcaption上升，我试图纠正它，但没有成功。 再多一点，请把你的智慧借给大家 如果我的英语不好，我很抱歉。如果让人困惑，请问我：） 完整图像 总体情况 一张“因为我想
（我无法问下一个问题为什么，所以我创建了一个新帐户并询问） 当前状态： 我想将元素的宽度与
.meter换句话说，如何将块的标准设置为
.meter（在上面的gif中，
img.meter的位置.meterfigcaption由于
figcaption再多一点，请把你的智慧借给大家 如果我的英语不好，我很抱歉。如果让人困惑，请问我：）
完整图像 总体情况 一张“因为我想这样做，所以我想把这个绿色宽度作为基础”（我认为这很容易想象） 密码
html{
字体大小：62.5%；
}
.数据{
垫面：1.7rem；
垫底：1.7rem；
}
李先生{
显示器：flex；
柔性包装：包装；
对齐内容：之间的空间；
}
李：最后一个孩子{
右边距：0；
}
.代码{
最高保证金：1.7雷姆；
}
身材{
保证金权利：.9rem；
字号：1rem；
位置：相对位置；
身高：4.4rem；
}
图>img{
排名：0；
底部：0；
}
图>.meter{
身高：4.4rem；
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
}
图>figcaption{
线高：1；
文本对齐：居中；
}
.米-t{
身高：2.3雷姆；
显示：块；
位置：绝对位置；
底部：0；
右：0；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
}
.PHP>.meter-t{
宽度：2.4rem；
}
技能
-
插图画家
Photoshop
杂志排版
矢量工程
阴凉处
-
HTML
CSS
Javascript
PHP
figure {
display: grid;
grid-template: 'meter' auto 'name' min-content / 4.4rem; // set the size of the meter here!
grid-row-gap: 1.5rem // just to space thing a little
}
figure img {
grid-area: meter; //put both images on the same area so they overlap
align-self: center; //center both horizontally and vertically
justify-self: center;
}
figure .meter {
width: 100%; // make it 100%, since the size is set on the grid template
}
figure .meter_t {
height: 50%; // same as before, let the size be dictated by the grid
width: 50%;
}
figure figcaption {
grid-area: name; //put the name at the bottom
justify-self: center; // so it overflows to the sides
}
编辑：添加标题的中心Ah css网格！谢谢你让它容易理解。我很高兴：D然而，我想根据
.meter