如何适合特定子元素的宽度？ [英] How to fit the width of a specific child element?
问题描述
我正在尝试创建一个技能表。
（我不能问下一个问题，所以我创建了一个新帐户并询问）
I'm trying to create a skill meter.
(I could not ask the next question why, so I created a new account and asked)
当前状态：
我想将元素的宽度与 .meter相匹配。
换句话说，如何在 .meter （子元素）中设置块的标准？
（在上面的gif中， img.meter 的位置）
I want to match the width of the element to the .meter.
In other words, how to set the standard of the block at .meter (child element)?
(In the above gif, place of img.meter)
我希望基于保证金在 .meter ..（现在 figcaption 是标准）上
并且由于 figcaption 上升了，我试图纠正它，但没有用。
多一点，请大家发挥智慧！
I would like margin based on .meter.. (now figcaption is the standard)
And since figcaption went up, I tried to correct it, but it did not work.
A little more, please lend your wisdom everyone!
对不起，如果我的英语不好。如果令人困惑，请问我：）
I'm sorry if my English is bad. If it is confusing, please ask to me :)
总体图片
因为我要这样做，所以我想以此宽度的绿色为基数（我认为很容易成像）
A picure of "Because I want to do this, I want to base this width of green" (I thought it was easy to image)
html {
font-size: 62.5%;
}
.data {
padding-top: 1.7rem;
padding-bottom: 1.7rem;
}
.skill li {
display: flex;
flex-wrap: wrap;
align-content: space-between;
}
.skill li :last-child {
margin-right: 0;
}
.code {
margin-top: 1.7rem;
}
figure {
margin-right: .9rem;
font-size: 1rem;
position: relative;
height: 4.4rem;
}
figure > img {
top: 0;
bottom: 0;
}
figure > .meter {
height: 4.4rem;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
figure > figcaption {
line-height: 1;
text-align: center;
}
.meter-t {
height: 2.3rem;
display: block;
position: absolute;
bottom: 0;
right: 0;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
}
.PHP > .meter-t {
width: 2.4rem;
}
<section class="skill">
<p class="title">skill</p>
<ul class="data">
<li class="tool">
<figure class="Illustrator">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221627.png" alt="advanced" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221624.png" alt="Illustrator" />
<figcaption>Illustrator</figcaption>
</figure>
<figure class="Photoshop">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221753.png" alt="Photoshop" />
<figcaption>Photoshop</figcaption>
</figure>
<figure class="Indesign">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221719.png" alt="Indesign" />
<figcaption>Indesign</figcaption>
</figure>
<figure class="Vectorworks">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221747.png" alt="Vectorworks" />
<figcaption>Vectorworks</figcaption>
</figure>
<figure class="Shade">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221629.png" alt="intermediate" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221750.png" alt="Shade" />
<figcaption>Shade</figcaption>
</figure>
</li>
<li class="code">
<figure class="HTML">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221722.png" alt="HTML" />
<figcaption>HTML</figcaption>
</figure>
<figure class="CSS">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221632.png" alt="elementary" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221725.png" alt="CSS" />
<figcaption>CSS</figcaption>
</figure>
<figure class="Javascript">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221717.png" alt="Javascript" />
<figcaption>Javascript</figcaption>
</figure>
<figure class="PHP">
<img class="meter" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221634.png" alt="beginner" />
<img class="meter-t" src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/O2_milk/20190224/20190224221714.png" alt="PHP" />
<figcaption>PHP</figcaption>
</figure>
</li>
</ul>
</section>
推荐答案
是否允许使用CSS网格？
Are you allowed to use CSS grids? It's really easy to do using it
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
}
您甚至可以删除所有定位代码，只需保留图像的大小即可。
You can even remove all that positioning code, just leave the sizes of the images.
https://codepen.io/anon/pen/zbOYPO
编辑：添加标题的居中
这篇关于如何适合特定子元素的宽度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
