Question

我为朋友eBay列表创建了一个非常基本的HTML模板，在左侧列中的图像与在较小设备上查看时右侧列中的文本重叠时出现问题。这是一个截图：

Example of image overlapping

这是我的代码，我已经替换了图像，因为它们是TinyURL（被警告，它可能不是很好）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Shadez</title>
</head>

<body style="margin:0 auto; max-width:900px;">

	<div>
    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="Custom Shadez logo" width="100%">
    </div>
    
    	<h1 style="text-align:center; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif">LOCS Sunglasses - Flattop Wayfarer Style Frames</h1> 
        
    	<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-------------------------------------------->

    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="photo of sunglasses" width="100%">   
    	<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-------------------------------------------->

    
    	<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">
    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="free postage and handling" width="100%">
    </div>
    
     <div style="margin-top:7px">
    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="item description" width="100%">
    </div>
    
    <div >
    	<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"> 
	<strong>Size (mm):</strong> (A) 148 (B) 58 (C) 45 (D) 138<br>
	<strong>Style:</strong> Flat Top Wayfarer<br>
	<strong>Lens:</strong> Grey / Category 3<br>
	<strong>Frame:</strong> Gloss Black<br>
	<strong>Features:</strong> UV 400 Protection
    </p>
    
     <div style="margin-top:7px">
    	<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>
	<strong>AUSTRALIA</strong> (Express Post)  = $8.45<br>
	<strong>USA / Canada, Asia & NZ</strong> = $9.95 (AUD)<br>
	<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;">
    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="postage services" width="100%">
    </div>
    
    <div style="margin-top:10px">
    	<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"> 
		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;">
    	<img src="http://www.w3schools.com/css/img_fjords.jpg" alt="payment" width="100%">
    </div>

    </div>
    
</body>
</html>

有什么想法吗？我做了很多研究，似乎无法解决这个问题。

Answer 1

我不知道你写了什么代码，但试试看：

img {display：block;宽度：100％！重要;在你的css文件中。

浮动div中重叠的图像

1 个答案: