0

我正在尝试以这种样式设置图像:一个在顶部,另一个在 this 下方。实际上我做错了什么,在我的结果图像中是一个在另一个之下。这是 jsFiddle

第二张图片被课堂隐藏overflow:hiddenslider

问题:

我在哪里犯错?我确信有简单的解决方案,但我浪费了一些时间并且找不到它。



PS 如果有可能我正在寻找仅更改css的解决方案。

4

3 回答 3

2

将图像的 css 更改为:

img{
    display:block;
}

这样就行了。

评论后编辑:

img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0;    
}

这会将您的所有图像钉在左上角。

于 2013-02-11T18:41:36.937 回答
1

我想你的img必须

img
{
display:block; /*if you want top to bottom use display:inline;*/

}
于 2013-02-11T18:43:52.807 回答
1

我看到你已经标记了一个答案,但我已经输入了这个,所以你去吧:)

您也可以通过删除浮动来稍微简化您的 CSS,如果您只为滑块使用图像(图像旁边没有文本),您甚至可以通过删除整个.photodiv 来简化 HTML。

简化代码:

<div class="slider">
    <img src="http://lorempixel.com/754/453/" alt="Bottom Image" />
    <img src="http://placehold.it/754x453" alt="Top Image" />
</div>

.slider {
    overflow: hidden;
    position: absolute;
    top: 1px;
    left: 371px;
    width: 754px;
    height: 453px;
}
img{
    position: absolute;
    z-index: -1;
    top: 0px;
    left:0px;
}

http://jsfiddle.net/daCrosby/MP6qN/8/

于 2013-02-11T19:38:00.447 回答