0

我正在尝试在设置为特定宽度的区域内将多个图像叠加在一起。我的问题是，当这些图像的组合宽度超过该区域的宽度时，一些图像被放置在下面的行上。我试图通过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;}
4

1 回答 1

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>​
于 2012-07-01T19:10:48.253 回答