位置関係で2つのdivを並べる方法

Question

6つの画像を並べて表示するサイトを構築しています。それぞれの画像にマウスを移動すると、大きな画像を見ることができます。

現在、私は、ホバー機能を備えた2つの画像を表示する以下のコードを書いています。私が持っている問題は、画像が並べて表示されるのではなく、それぞれの上に表示されることです。浮動小数点数を追加しようとしました：左にしたが、2番目の画像にはホバーイメージが表示されず、これをどのように修正できるかわかりません。

次は、HTMLとCSSです：誰かが私はこの問題を解決することができますどのように助言することができれば、私は6枚の画像を表示する必要があるが、現時点で試みたよう

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

は、それをお願い申し上げますそれが動作することを確認する2画像。

Answer 1

は

.Enlarge { 
    position: relative; 
    display:inline-block; 
} 

Answer 2

は私jsfiddle私はちょうど使用スタイル=を見てみましょう以下のようにクラスを変更する "フロート：左"

<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/