html - 如何模拟两个非兄弟元素之间的绝对权利 0？

Question

这是 code我有:

HTML

<div class="container">
  <div class="limit">
    &nbsp;
  </div>
  <div class="dots">
    &nbsp;
  </div>
</div>

CSS

.container 
{
  background-color:blue;
  width:100%;
  height:100px;
  position:relative;
}

.limit
{
  position:relative;
  width:500px;
  height:100%;
  margin:auto;
  background-color:green;
}

.dots 
{
  background-color:red;
  position:absolute;
  top:40px;
  right:20%;
  width:200px;
  height:20px;
}

出于某种原因，我无法在 .limit(插件自动生成的代码)中移动 .dots。我想(使用纯 CSS)以任何 .container 宽度将红色卡在绿色中。一种 right:0 with .limit 内的 .dots，所以 this将是任何 .container 宽度的结果。

这可能吗？有什么技巧吗？尝试使用 calc，但我失败了。

Answer 1

在这种情况下，您可以使用 calc() 并将 right 设置为 (container width - width of limit)/2

calc((100% - 500px) / 2)

.container {
  background-color: blue;
  width: 100%;
  height: 100px;
  position: relative;
}
.limit {
  position: relative;
  width: 500px;
  height: 100%;
  margin: auto;
  background-color: green;
}
.dots {
  background-color: red;
  position: absolute;
  top: 40px;
  right: calc((100% - 500px) / 2);
  width: 200px;
  height: 20px;
}

<div class="container">
  <div class="limit">
    &nbsp;
  </div>
  <div class="dots">
    &nbsp;
  </div>
</div>