html - 如何让2个div与相对位置并排

Question

我正在构建一个需要并排放置 6 张图片的网站，当您将鼠标悬停在每张图片上时，您应该能够看到更大的图片。

目前我已经设法编写了以下代码，该代码显示了 2 个具有悬停功能的图像。我遇到的问题是图像出现在每个图像的顶部而不是并排显示。我尝试添加一个 float:left 但是第二个图像没有显示悬停图像，我不确定如何解决这个问题。

以下是 HTML 和 CSS:

.Enlarge {
  position: relative;
}
.Enlarge span {
  position: absolute;
  left: -9999px;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease;
  -moz-transition: opacity 0.5s ease;
  -ms-transition: opacity 0.5s ease;
  -o-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}
.Enlarge span img {
  margin-bottom: 5px;
}
div.Enlarge:hover {
  z-index: 999;
  cursor: pointer;
}
div.Enlarge:hover span {
  visibility: visible;
  opacity: 1;
  top: 10px;
  left: 0px;
  z-index: 999;
  width: 240px;
  height: 340px;
  padding: 10px;
}

<div class="Enlarge">
  <img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge">
  <img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>

如果有人可以建议我如何解决这个问题，我将不胜感激，因为我需要显示 6 张图片，但目前尝试使用 2 张图片以确保它有效。

Answer 1

看看我刚刚使用的 jsfiddle style="float: left"

<div class="Enlarge" style="float: left">
  <img src="image1.jpg" alt="" /><span><img src="image1h.jpg" alt="" /></span>
</div>
<div class="Enlarge" style="float: left">
  <img src="image2.jpg" alt="" /><span><img src="image2h.jpg" alt="" /></span>
</div>

编辑:缺少链接 https://jsfiddle.net/m4odfrcr/