Question

我想在div中有一些图像。只应显示一个图像。我用：

<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中溢出并且可见。我该如何解决这个问题？

Answer 1

让我们从修复标记开始......

<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中。这会将绝对位置重置为相对定位父级的左上角。

然而，在这种情况下，您需要做的就是向左浮动。没有理由在幻灯片元素中使用绝对定位的子项。

位置：绝对和溢出：隐藏？

1 个答案: