我编写了一个简单的代码，使两个框的中心对齐不同的尺寸
现在，我想根据第二个尺寸（灰色）添加第三个尺寸，并从第二个尺寸之外开始。
第二个（灰色）是磁芯，而第三个我想成为围绕芯的线圈，但它有自己的尺寸。
这就是为什么我要基于秒的尺寸。
请你能帮我做到吗？
提前非常感谢您！
亲切的问候，
乔治
这是代码：
<html>
<head>
<style>
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius:20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius:5px
}
</style>
</head>
<div id="container">
<div class="box1">
<div class="box2">
<div></div>
</div>
</div>
</div><!-- end #container -->
</html>最佳答案
因此，以灰色为核心，周围的红色边框为线圈。这就是您想要完成的方式吗？
#container {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
background: black;
height: 50px;
width: 200px;
border-radius: 20px
}
.box2 {
display: flex;
justify-content: center;
align-items: center;
margin: -1000px;
background: grey;
height: 10px;
width: 100px;
border-radius: 5px;
position: relative;
}
.box2:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 2px solid red;
border-radius: 5px;
}<div id="container">
<div class="box1">
<div class="box2">
</div>
</div>
</div>
<!-- end #container -->关于html - 在第二个之外添加第三个盒子，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53007655/