html - 无法让图像彼此下方

Question

你好我是 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

因为你的问题对我来说不是很清楚你想要什么堆叠我已经创建了一个小例子，有 3 种不同的可能性看看小提琴。

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

.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 3

浮动不会使图像堆叠。为此，您必须使用 position:absolute、top/bottom、left/right 定位。您可以使用 z-index 更改堆栈顺序。

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

这是一个演示它的小提琴。根据下面的评论，放置一个带有定位的包含 div 可能会防止未来的头痛。我已经更新了我的小提琴以包含它。

Answer 4

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