html - 如何在更改浏览器大小时使 div 保持固定在其他 div 的边框线上？

Question

我在找到将一个 div 固定在另一个 div 的中心边缘线上并且在浏览器大小更改时不更改位置的代码时遇到问题。

这是我的代码:

.box{
  border-width: 2px;
  border-color: #0060A3;
  border-style: solid;
  height: 400px;
  margin-left: 25%;
  margin-right: 25%;
  position: relative;

}

  .two{
  width: 100px;
  height: 100px;
  border-width: 2px;
  border-color: #FAA21B;
  border-style: solid;
  background-color: #fff;
  position: absolute;
  margin-left: 92.5%;
}

我对 .two 使用 margin-left: 92.5% ，这使它位于 .box 边缘线的中心位置，正如我需要的那样，但它仅在浏览器为 100% 大小时才停留在那里。如果我把它变小，.two 会移动，它不会固定在中间。 Picture of the problem

Answer 1

您可以使用 after 属性进行布局检查

.box{
  width:450px;
  height:250px;
  border:1px solid #0ff000;
  position:relative;
  background:#ffffff;
}
.box:after{
  content:'';
  position:absolute;
  right:-20px;
  top:1px;
  width:50px;
  height:40px;
  border:1px solid #ff0000; 
  background:#ffffff;
}

<div class="box">

</div>