Question

购物车包含以下html创建的产品页面和图片。如果页面在borwser中使用ctrl + +进行缩小，则图像和文本将重叠：图像变宽但文本不能正确移动，它位于图像上方。如何解决这个问题，以便文本在图像之后开始？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-    strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...
        <div>
            <div style="float: left; width: 30%">

                <a class="fbox" href="/store/Store/Lightbox?product=FTL286%252f42">
                    <img style="width: 200px" alt="" src="/store/Store/MainImage?product=FTL286%252f42" />
                </a>
            </div>
            <div style="float: left; Xmargin-left: 4%">
                <div style="margin: 3%">

                </div>
                <div>
                    <b>
                        € 78,92</b>
                    <br />

                    <br />
                    <div style="height: 1.5px">
                    </div>
Availability:<b>
                        In order
                    </b>
                    <form action="/store/Store/Details?product=FTL286%252f42" method="post">
                    <br />
                    <input id="ProductId" name="ProductId" type="hidden" value="FTL286/42" />
                    Quantity
                    <input id="Quantity" name="Quantity" style="width:30px" type="text" value="1" />

                </div>
                <br />
                <br />
                <input type="submit" value="Add to cart" class="button green rounded" />
                </form>
            </div>
        </div>

Answer 1

如果图片已固定，例如200px，则可以在右侧分区使用<div style="margin-left: 250px">。

<强> SEE DEMO

如何产品图像和描述重叠

1 个答案: