Question

ello我是html和css的新手，并尝试显示右侧浮动的图像。现在我希望将图像置于彼此之下但是不起作用。有人能帮我吗？

这是我的图像的css代码：

.imagesLeft{ float: left; margin: 5px; } .imagesRight{ float: right; margin: 5px; }

这是我的图片的html代码：

<div class="imagesRight"> <img src="../images/medewerkers.jpg"> </div> <div class="imagesRight"> <img src="../images/medewerkers1.jpg"> </div> <div class="imagesRight"> <img src="../images/medewerkers2.jpg"> </div>

提前致谢！

Answer 1

如果您希望将它们堆叠在一起，您可以使用：

.imagesRight{
   float: right;
   margin: 5px;
   clear: right; 
}

Answer 2

浮动不会将图像堆叠起来。为此，您将必须使用position：absolute和top / bottom，left / right locate。您可以使用z-index更改堆栈顺序。

.imagesRight {
    position:absolute;
    top:0;
    left:0;
}

这是展示它的fiddle。根据下面的评论，放置一个包含定位的div可以防止将来头痛。我已经更新了我的小提琴，包括那个。

Answer 3

因为你的问题并不是我真正清楚你想要的堆叠我已经创建了一个具有3种不同可能性的小例子看看at the fiddle。

最后两个例子可能是有趣的。造型看起来像是这样：

.position-relative {
    background-color:orange;
}
.position-relative img {
    position:relative;
    display:block;
}
.z-index {
    background-color:gold;
    position:relative;
    margin:20px;
    padding:20px;
}
.z-index img {
    position:absolute;
    top:0px;
    left:0px;
        border:2px solid red;
}
.z-index img.first {
    z-index:3;
}
.z-index img.seccond {
    z-index:2;
}
.z-index img.last {
    z-index:1;
}

Answer 4

也许这个小提琴可以帮到你：你不必使用float这个div，因为它是堆叠的。 fiddle example

无法让图像相互影响

4 个答案: