html - 图像重叠一定宽度

Question

我试图在设置为特定宽度的区域内将多个图像叠加在一起。我的问题是，当这些图像的组合宽度超过区域的宽度时，一些图像会放在下面的线上。我尝试通过使用 left:-100px 使图像彼此重叠并减小整体组合图像的宽度来解决此问题，但仍然出现同样的问题。

我知道一个解决方案可能是 boxC{top:-100px;} 但这意味着在窗口中生成了一个额外的 100px。作为对此的验证，您可以将浏览器的垂直高度最小化，您会看到有一个看不见的间隙。 http://postimage.org/image/5s0o82f81/

我的问题是，我如何才能在一定宽度内将多张图片叠加在一起，而不会将任何图片放在下面的行上。

我目前拥有的:http://jsfiddle.net/xFkh6/2/

我想要的:http://jsfiddle.net/d9xh8/2/ (请注意，为了实现这一点，我必须设置 #wrapper{width:600px}。我想通过将其保留为 #wrapper{width:500px} 来实现这种外观就像在之前的 jsFiddle 中一样。

HTML:

<div id="wrapper">
    <div id="boxA" class="box"></div>
    <div id="boxB" class="box"></div>
    <div id="boxC" class="box"></div>
</div>

CSS:

#wrapper { border:black 5px solid; width:500px; height:100px; margin:0 auto;}
.box { float:left; position:relative; top:0;}
#boxA {width:200px; height:100px; background:rgba(250,100,100,0.6); left:0px; }
#boxB {width:200px; height:100px; background:rgba(150,140,200,0.6); left:-50px;}
#boxC {width:200px; height:100px; background:rgba(100,250,250,0.6); left:-100px; top:-100px;}

Answer 1

不要像这样使用 left 和 top，

<style>
#wrapper { border:black 5px solid; width:500px; height:400px; margin:0 auto;}
#wrapper div { float:left;position:relative;}
#boxA {width:200px; height:100px; background:rgba(150,20,0,0.6); margin:0 0 0 0}
#boxB {width:200px; height:100px; background:rgba(150,40,100,0.6); margin:50px 0 0 -50px;}
#boxC {width:200px; height:100px; background:rgba(150,60,200,0.6); margin:100px 0 0 -50px;}  ​
</style>
<div id="wrapper">
    <div id="boxA" class="box"></div>
    <div id="boxB" class="box"></div>
    <div id="boxC" class="box"></div>
</div>​