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%;
}

我使用margin-left：92.5％for .two，这使得它位于.box边缘线中心的位置，因为我需要它，但只有当浏览器的大小为100％时它才会停留在那里。如果我把它做得更小，那么.two正在移动，它不会固定在中间。 Picture of the problem

Answer 1

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

//a[starts-with(.,'Smart Watches')
//li[@data-filter-facet='smart-watches']/a[contains(.,'Smart Watches')
//li[@data-filter-facet='smart-watches']/a[starts-with(.,'Smart Watches')

.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;
}

Answer 2

我喜欢@ Hiren的答案，但这里有另一种选择：

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

  left: 100%;
  margin-left: -50px;
}

重要的部分是最后两行......

JSFiddle

如何在改变浏览器大小的同时使div保持固定在其他div的边界线上？

2 个答案: