1
我已经为朋友eBay列表创建了一个非常基本的HTML模板，并且在较小的设备上查看时，左列中的图像与右列中的文本重叠时出现问题。下面是截图：浮动div中的图像重叠
这里是我的代码，我已经更换了图片，因为他们TinyURLs（被警告，它可能不是很大）：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Shadez</title>
</head>
<body style="margin:0 auto; max-width:900px;">
\t <div>
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Custom Shadez logo" width="100%">
</div>
\t <h1 style="text-align:center; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif">LOCS Sunglasses - Flattop Wayfarer Style Frames</h1>
\t <h2 style="text-align:center; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif">Excellent Quality - FREE Postage Australia Wide</h2>
<div style="width:50%; max-width:550px; float:left">
<!------------------------------------------EDIT PHOTO IMAGES AND POSTAGE LOGO HERE-------------------------------------------->
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="photo of sunglasses" width="100%">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="free postage" width="100%" style="margin-top:50px">
</div>
<div style="width:46%; float:right; margin-top:-24px;">
<!------------------------------------------EDIT VIEW MORE LINKS HERE-------------------------------------------->
\t <p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:20px"><a href="http://stores.ebay.com.au/CustomShadez/Polarised-/_i.html?_fsub=2608818011" target="_blank"><strong>> VIEW OTHER POLARISED SUNGLASSES</strong></a></p>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:20px"><a href="http://stores.ebay.com.au/CustomShadez" target="_blank"><strong>> VIEW FULL SUNGLASSES RANGE</strong></a></p>
<!------------------------------------------ITEM DESCRIPTION-------------------------------------------->
<div style="margin-top:7px">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="free postage and handling" width="100%">
</div>
<div style="margin-top:7px">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="item description" width="100%">
</div>
<div >
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="dimensions of sunglasses" width="80%">
</div>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; margin-top:-7px">
\t <strong>Size (mm):</strong> (A) 148 (B) 58 (C) 45 (D) 138<br>
\t <strong>Style:</strong> Flat Top Wayfarer<br>
\t <strong>Lens:</strong> Grey/Category 3<br>
\t <strong>Frame:</strong> Gloss Black<br>
\t <strong>Features:</strong> UV 400 Protection
</p>
<div style="margin-top:7px">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="postage" width="100%">
</div>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px">
<strong>AUSTRALIA</strong> (Registered + Tracking) = FREE<br>
\t <strong>AUSTRALIA</strong> (Express Post) = $8.45<br>
\t <strong>USA/Canada, Asia & NZ</strong> = $9.95 (AUD)<br>
\t <strong>UK & Europe</strong> = $14.95 (AUD)
</p>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px">
Items are sent within 1 working day of receiving payment. All postage costs are capped so you can purchase as many pair as you like at no extra postage cost
</p>
<div style="margin-top:10px; text-align:center;">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="postage services" width="100%">
</div>
<div style="margin-top:10px">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="payment" width="100%">
</div>
<p style="font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px">
\t \t Preferred payment method is PayPal or Bank Deposit Feel free to contact us with any enquiries regarding payment.
</p>
<div style="margin-top:10px; text-align:center;">
\t <img src="http://www.w3schools.com/css/img_fjords.jpg" alt="payment" width="100%">
</div>
</div>
</body>
</html>有任何想法吗？我做了相当多的研究，似乎无法解决这个问题。