如何将主图像下的缩略图移动到主图像的右侧？

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