0

特定の幅に設定された領域内で、複数の画像を重ね合わせようとしています。私の問題は、これらの画像の合計幅が領域の幅を超えると、一部の画像が下の線に配置されることです。left:-100pxを使用して画像を互いにオーバーラップさせ、結合された画像全体の幅を狭くすることでこれを修正しようとしましたが、同じ問題が引き続き発生します。

私は解決策があり得ることを知っていますboxC{top:-100px;}が、それはウィンドウに余分な100pxが生成されることを意味します。これを確認するために、ブラウザの垂直方向の高さを最小化すると、目に見えないギャップがあることがわかります。http://postimage.org/image/5s0o82f81/

私の質問は、下の線に画像を配置せずに、特定の幅内で複数の画像を重ね合わせるにはどうすればよいかということです。

私が現在持っているもの：http：//jsfiddle.net/xFkh6/2/

私が欲しいもの：http：//jsfiddle.net/d9xh8/2/（これを達成するには、設定する必要があったことに注意してください。前のjsFiddleと同じように#wrapper{width:600px}残して、この外観を実現したいと思います。#wrapper{width:500px}

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

左右の代わりに、このようにマージンを使用します。

<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 に答える