0

ショッピング カートの詳細ページで、商品画像は次のコードを使用して定義されます。その比率を維持する必要があります。

ズーム レベルを大きくすると、画像はその後のテキストの開始を隠します。

このページをすべてのズーム レベルで適切にレンダリングするにはどうすればよいですか?

不明な理由で、div #productinfo は左側から開始しますが、画像の後に開始する必要があります。すべての div に display:inline-block を追加しようとしましたが、効果はありません。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 に答える