Question

我编写了一个简单的代码，使两个框的中心对齐，并具有不同的尺寸现在我想根据第二个尺寸（灰色）添加第三个尺寸，并从第二个尺寸之外开始。第二个（灰色）是磁芯，第三个我想成为围绕芯的线圈，但它具有自己的尺寸。这就是为什么我要基于秒的尺寸。请你能帮我做到吗？提前非常感谢您！

亲切的问候，乔治

代码如下：

<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>

Answer 1

因此，以灰色为核心，周围的红色边框为线圈。这是您希望完成的方式吗？

#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 -->

在第二个之外添加第三个盒子

1 个答案: