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>

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

一些客户风格可以引导3，一些客户mvc 3 razor视图，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>

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

1 个答案: