jquery - 如何在图像的左侧和底部 float 拇指

Question

ASP .NET MVC3 购物车使用 Bootstrap 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>

如果图像多于主图像高度，如何强制图像出现在主图像底部？

可以使用一些自定义样式 bootstrap 3、一些自定义 mvc 3 razor view、jquery、jquery ui 或一些用于此的插件吗？ 哪种方法最好？

使用的样式:

.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>