将div基于左边距放在父对象旁边

Question

图片是我想要实现的目标。基本上我正在尝试创建一个包装器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％并得到正确的结果，但我想知道是否有方法只用边距左边做吗？

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/

Answer 2

您可以尝试使用浮动而不使用绝对位置。

HTML

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

CSS

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

DEMO：http://jsfiddle.net/pDxXB/