0

div内にいくつかの画像を入れようとしています。1つの画像のみを表示する必要があります。私が使う：

<div id="slideshow" style="width:600px;height:400px;position:absolute;overflow:hidden;"></div>
<img src="img3.png" width="600px" height="400px" id="img3" style="position:absolute;left:0px;">
<img src="img2.png" width="600px" height="400px" id="img2" style="position:absolute;left:600px;">
<img src="img1.png" width="600px" height="400px" id="img1"     style="position:absolute;left:1200px;">
</div>

しかし、画像はdivからオーバーフローし、表示されます。これを修正するにはどうすればよいですか？

4

1 に答える 1

2

マークアップを修正することから始めましょう...

<style>
#slideshow{
    width:600px;
    height:400px;
    position:absolute;
    overflow:hidden;
}

#slideshow img{
    width:600px;
    height:400px;
    float:left;
}
</style>

<div id="slideshow">
    <img src="img3.png" id="img3">
    <img src="img2.png" id="img2">
    <img src="img1.png" id="img1">
</div>

したがって、その理由は、親と子の両方でposition：absoluteを定義したためです。画像タグを比較的配置されたdivでラップすることもできます。これにより、絶対位置が相対位置の親の左上にリセットされます。

ただし、この場合、必要なのは左にフロートすることだけです。スライドショー要素に絶対位置の子を含める理由はありませんでした。

于 2012-09-29T01:02:25.197 に答える