如何在圖像的左側和底部浮動大拇指

Question

ASP .NET MVC3購物車使用引導程序3. 產品頁面包含主圖像和可變數目的縮略圖。 縮略圖單行顯示

如果有許多縮略圖，大白色會出現在它們的右側。

如何增強此佈局？

如何將拇指浮在購物車中主圖像的左側和底部。

我試圖

<div class="detail-thumbs"> 
<a> 
       <img src="/store/StoreImage/DetailImage/5056"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/5057"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/5058"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/7215"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/7217"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/7218"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/7219"> 
      </a> 
<a> 
       <img src="/store/StoreImage/DetailImage/7220"> 
      </a> 
     </div> 

<a class="details-picture fbox" href="/store/Store/Lightbox?product=ATH-M50X"> 
     <img alt="" id="detail-mainimage" src="/store/StoreImage/DetailImage/5057"> 
    </a> 

如何強制圖像，如果有比主圖像高度更多的圖像出現在主圖像的底部？

可以自定義一些自定義樣式3，一些custome mvc 3剃鬚刀視圖，jQuery的，jQuery的用戶界面或一些插件用於此？ 哪個是最好的方法？使用

風格：

.detail-thumbs { 
    display: inline-block; 
    vertical-align: top; 
} 

    .detail-thumbs a { 
     display: block; 
     height: 50px; 
     width: 50px; 
     border: thin ridge #BBBBBB; 
     line-height: 50px; 
     margin: 0; 
     overflow: hidden; 
     position: relative; 
     text-align: center; 
    } 

     .detail-thumbs a img { 
      height: auto; 
      max-height: 47px; 
      max-width: 47px; 
      vertical-align: middle; 
      width: auto; 
      border: none; 
     } 

.details-picture { 
    border: thin ridge #bbb; 
    height: 200px; 
    line-height: 200px; 
    margin: 0 20px 15px 0; 
    position: relative; 
    width: 198px; 
    display: inline-block; 
    vertical-align: top; 
    overflow: hidden; 
    text-align: center; 
} 

Answer 1

很簡單試試這個

.gallery { 
 
    width: 420px; 
 
} 
 
.gallery .bigimg { 
 
    float: right; 
 
}

<div class="gallery"> 
 
    <a href="#" class="bigimg"> 
 
    <img src="http://placehold.it/300"/> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a> 
 
    <a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a><a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
    </a><a href="#"> 
 
    <img src="http://placehold.it/100"/> 
 
</div>