0

购物车包含以下使用 html 创建的产品页面和图像。如果在浏览器中使用 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>
4

1 回答 1

0

如果图像有固定的，比如 200px，你可以<div style="margin-left: 250px">在右边的分区上使用。

看演示

于 2012-04-19T09:39:35.407 回答