如何將主圖像下的縮略圖移動到主圖像的右側？

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

有很多的方法可以解決這個。這裏有一個

<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; 
}