css - 根据父级的左边距将 div 并排放置

Question

图片是我想要实现的。基本上，我试图制作一个包装 div，并能够根据父包装最左侧部分的左边距在其中放置可变数量的 div。

我希望能够这样说:

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

并实现图中所见。 然而，我注意到(我原以为会发生的)div 不愿意合作；当我添加一个 float:left 时，它们似乎将边距添加到彼此(因为在 div2 中除了它的 5% 左边距之外还有一个 margin-left:30%及其 10% 的宽度，使 div2 出现在距包装器最左侧部分 45% 处。

我意识到我可以只考虑之前的边距，并将 div2 的边距左侧设置为 30%-15%=15% 并得到正确的结果，但我想知道是否有一种方法可以只需使用 margin-left 即可？

Answer 1

不要漂浮它们；相反，将它们绝对定位在该位置，以便它们在某种意义上“重叠”；边距将按照您想要的方式将它们分开。

例子:

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

演示地址:

http://jsfiddle.net/Mu4GU/