如何在图像的左侧和底部浮动拇指答案

【问题标题】：How to float thumbs in left and bottom of image如何在图像的左侧和底部浮动拇指
【发布时间】：2015-06-05 20:29:50
【问题描述】：

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>

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

一些自定义样式可以引导 3、一些自定义 mvc 3 剃须刀视图、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;
}

【问题讨论】：

标签： jquery html css asp.net-mvc twitter-bootstrap

【解决方案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>

【讨论】：