Css 根据父级的左边距将div相邻放置

这就是我想要达到的目标。基本上，我尝试创建一个包装器div，并能够根据父包装器最左边的左边距在其中放置可变数量的div

我想说的是：

.div1 { margin-left:5%; }
.div2 { margin-left:30%; }
.div3 { margin-left:85%; }

并实现图中所示的目标。 然而，我注意到（我假设会发生），div不愿意合作；当我添加一个

float:left

时，它们似乎会相互添加边距（就像在div2中一样，除了5%的左边距和10%的宽度之外，还有一个

margin left:30%

，使得div2显示在距离包装最左边45%的位置

---

我意识到我可以只考虑以前的利润率，将div2左边的利润率设置为30%-15%=15%，然后得到正确的结果，但我想知道是否有一种方法可以只使用左边的利润率来实现这一点？

不要浮动它们；相反，将它们绝对定位在某个位置，以便它们在某种意义上“重叠”；利润率将保持不变用你想要的方式把它们分开

例如：

.green {background-color: green; position: absolute}
.one {width:10%; margin-left:5%}
.two {width:20%; margin-left: 30%}
.three {width:10%; margin-left: 85%}

演示地点：

---

您可以这样尝试浮动，而不使用绝对位置

HTML

---

演示：

谢谢。我曾尝试使用绝对位置，但它打乱了我布局的其余部分，因此我认为这不可行。我现在尝试使用绝对位置重建它，并获得了很好的结果。

<div id="page">
<div id="box1">10%</div>
<div id="box2">25%</div>
<div id="box3">15%</div>

#page{width:100%;height:200px; background-color:#000;}
#box1{height:200px; background-color:red; width:10%; margin-left:5%;float:left;}
#box2{height:200px; background-color:green; width:25%; margin-left:15%;float:left;}
#box3{height:200px; background-color:blue; width:15%; margin-left:30%;float:left;}