サムネイルをメインイメージの下からメインイメージの右側に移動するにはどうすればよいですか？

Question

私には、メイン画像といくつかのサムネイルがあるdivがあります。
現在、メイン画像の下にサムネイルが表示されています。しかし、私はそれらを主画像の右側に垂直に必要とします。続き

は私の現在のコードです：

<div id=album> 
    <img id="main-img" src='<%="Web/images/" +Model.List[0]%>' style="width:150px;height:100px;"> 
    <% foreach (var thumbnail in Model.List) { %> 
    <div id="thumbimg"> 
     <img class="thumbnail" src='<%="Web/images/thumbs/" + thumbnail%>' /> 
    </div> 
    <% } %> 
</div> 

CSS：

.thumbnail{ 
    float:left; 
} 
.thumbnail div{ 
    clear:both; 
} 
.thumbnail, #main-img{ 
    vertical-align:top; 
} 

JS：

$(document).ready(function() { 
    $('.thumbnail').on('click', function() { 
    console.log('clicked'); 
    $(this).parents('#album').find('#main-img').attr('src', $(this).attr('src').replace('thumbs/', '')); 
    }); 
}); 

Answer 1

これにアプローチする方法はたくさんあります。ここで私はthumbimg`がループで使用される `のIDを参照してください1

<div id=album> 
    <img id="main-img" src='<%="Web/images/" +Model.List[0]%>'> 
    <div id="allthumbs"> 
    <% foreach (var thumbnail in Model.List) { %> 
     <img src='<%="Web/images/thumbs/" + thumbnail%>' />    
     <br> 
    <% } %> 
    </div> 
</div> 

#main-img, #allthumbs{ 
    float:left; 
    width:150px; 
    height:100px; 
} 
#allthumbs{ 
    display:inline-block; 
}