c# - 如何将缩略图从主图像下方移动到主图像右侧？

我有一个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/', ''));
  });
});

最佳答案

有很多方法可以解决此问题。这是一个

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