0

在购物车详细信息页面中，产品图像是使用下面的代码定义的。它的比例应该保留。

对于更大的缩放级别，图像会在其后隐藏文本的开头。

如何在所有缩放级别中正确呈现此页面？

由于未知原因 div #productinfo 从左侧开始，但它应该在图像之后开始。我尝试将 display:inline-block 添加到每个 div 但这没有任何效果。使用 jquery、jquery ui、fancybox 和 pikachoose。

html:

<div style="float: left; width: 30%; margin-right: 1%">
            <a href="#" class="details-picture">
                <img src="/Thumb?product=1308318&amp;size=198" alt="">
            </a>
        </div>
<div id="productinfo">
 <div>
            Price <span id="Price">
                1.73
            </span>
  </div>

CSS：

.details-picture {
    background: none repeat scroll 0 0 #FFFFFF;
    border: thin ridge #BBBBBB;
    display: block;
    float: left;
    height: 200px;
    line-height: 200px;
    margin: 0 20px 15px 0;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 198px;
}
.details-picture img {
    border-width: 0;
    height: auto;
    max-height: 198px;
    max-width: 198px;
    vertical-align: middle;
    width: auto;
}
4

1 回答 1

1

这似乎是由于顶级的那些内联属性div。float: left和width: 30%导致您遇到的问题的组合。

<div class="productimage">
    <a href="#" class="details-picture">
        <img src="/Thumb?product=1308318&amp;size=198" alt="" />
    </a>
</div>
<div class="productinfo">
    <div>
        Price <span id="Price">1.73</span>
    </div>
</div>

jsfiddle

于 2013-02-17T10:53:32.987 回答