这是 code我有:
HTML
<div class="container">
<div class="limit">
</div>
<div class="dots">
</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,但我失败了。
最佳答案
在这种情况下,您可以使用 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">
</div>
<div class="dots">
</div>
</div>
关于html - 如何模拟两个非兄弟元素之间的绝对权利 0?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46304712/