1. 首页
  2. 问答
  3. 在html和css中的图像间距问题

在html和css中的图像间距问题

2013-04-30 77 views
0

我真的很感谢图像布局问题的一些帮助。我相信这是一个简单的解决方案，但我真的很难找出错误所在。在html和css中的图像间距问题

我已经创建了一个ebay列表，但是第一行中的第二张图片比第一张图片略低，并且还存在图片堆叠问题 - 我似乎无法弄清楚为什么，这里是链接到列表：

http://www.ebay.co.uk/itm/330879734229?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649

第三我想实现andimage滑块和收藏这样在这里找到：

http://www.ebay.co.uk/itm/New-eBay-Tegan-Fashion-Silk-Solids-Deep-V-Top-Green-Red-/400404202740?pt=UK_Women_s_Tops_Shirts&var=&hash=item9c02e563ad

但我似乎无法找到任何小号同样的，任何帮助我指出正确的方向将是伟大的。

下面是易趣上市代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Untitled Document</title> 
    </head> 
    <body> 

<style type="text/css"> 
@charset "utf-8"; 
body { 
font:100%/1.4; 
color:#000; 
margin:0; 
padding:0; 
font-family: Sans-Serif, 'Lucida Grande', Verdana, Arial, Sans-Serif; 
} 
#thumbnailArea { 
float: left; 
white-space:nowrap;  
padding: 5px; 
margin: 0px 10px 40px 30px; 
width: 200px; 
height: 265px; 
border: 3px solid #999999; 
} 
.crossbox { 
float:left; 
height:auto; 
width: 1060px; 
border-top: 5px solid #999999; 
border-bottom: 5px solid #999999; 
} 
a img { 
border:none; 
} 
ul,ol,dl { 
margin:0; 
padding:0; 
} 
h3,h6,p { 
margin-top:0; 
} 
h1 { 
font-size:80%; 
display:inline; 
color:#000; 
} 
h1,h2,h3,h4,h6,h5 { 
margin-top:3px; 
font-weight:100; 
} 
h2,h3,h6,h5{ 
color:#666; 
} 
h2 { 
font-weight:bold; 
color:#36b3fa; 
fontfamily: Sans-Serif; 
margin:0px; 
} 
h3 { 
font-size:200%; 
display:inline; 
} 
h4 { 
font-size:90%; 
color:#333; 
margin:0; 
} 
h5 { 
color:#666; 
font-size:100%; 
margin-top: 0px; 
margin-bottom: 5px; 
line-height: 5px; 
} 
h6 { 
font-size:100%; 
} 
#list { 
margin-top:0; 
margin-left:40px; 
line-height: 15px; 
} 
.spacer { 
} 
.container { 
background:#FFF; 
overflow:auto; 
width: 1100px; 
} 
.sprybox { 
margin-left: 40px; 
height:50px; 
width:890px; 
} 
.header { 
position: relative; 
width:880px; 
height:200px; 
} 
.header-logo { 
width: 1100px; 
height: auto; 
} 
#element { 
width:600px; 
float:left; 
height:auto; 
margin-top: 30px; 
} 
.clear { 
clear:both; 
} 
a:hover,a:active,a:focus { 
text-decoration:none; 
color:#333; 
} 
.content { 
width:280px; 
float:left; 
height:auto; 
margin-left:0px; 
margin-bottom:35px; 
} 
.breakline { 
width: auto; 
margin-bottom: 10px; 
border-bottom:2px solid #999; 
} 
.deliverydetails,.paymentdetails,.productdescription,.feedback,.aboutus,.termsandconditions { 
width:380px; 
height:auto; 
background-color:#f7f7f7; 
border-radius:6px; 
-webkit-border-radius:6px; 
-moz-border-radius:6px; 
padding:30px 30px 30px 30px; 
border:2px solid #666; 
margin-left: 0px; 
margin-top: 30px; 
} 
.imagecontainer { 
float:left; 
width:525px; 
} 
#footer { 
float:left; 
width:1100px;f 
ont-family:arial; 
font-size:13px; 
clear:left; 
background-color:#36b3fa; 
background-repeat:no-repeat; 
width:1100px;height:48px; 
} 
#footer .footerText { 
float:left; 
width:420px; 
color:white; 
margin-top:16px; 
margin-left:10px; 
} 
#footer .footerText a { 
color:white; 
text-decoration:none; 
} 
#footer .footerText a:hover { 
color:white; 
text-decoration:underline; 
} 
.copy { 
text-align:left; 
float:right; 
clear:both; 
margin-top:-27px; 
margin-right:5px; 
background-color: transparent; 
border: none; 
} 
.outercont { 
} 
</style> 
<div class="outercont"> 
    <div class="container"> 
    <div class="logo"> <a href="http://stores.shop.ebay.co.uk/New-Horizon-Products/home.html"> <img src="http://sweetvision.co.uk/ebayimages/MWT/logobanner2.jpg" alt="header logo" 
    class="header-logo" /> </a></div> 

    <!-- end.header --><!--end of sprybox --> 
    <div class="imagecontainer"> 
     <style type="text/css"> 
<!-- 
.Thumbnail-Image { 
float: left; 
margin: 10px 0 0 10px; 
padding: 0 0 0 0; 
width: 246px; 
border: 0; 
} 
.image { float: left; width: 256px; text-align: center; padding:0 0 10px 0; } 
.image a { text-decoration: none; font-size: 0.8em; } 
.Image-Gallery-Divider { float: left; width: 400px; height: 10px; } 
--> 
</style> 
     <script type="text/javascript"> 
// Create the array object 
var ItemImagesArray=new Array 
("http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg", 
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg", 
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg", 
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg", 
"http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg","","","","","","","","","",""); 
// We make sure the first image exists before we execute the displaying of the images 
if (ItemImagesArray[0] != "") { 
// Create the indexing variable 
var ItemImagesArrayIndex = 1; 
for (ItemImagesArrayIndex in ItemImagesArray) { 
if (ItemImagesArray[ItemImagesArrayIndex] != "") { 
// If we do have additional images, create the image object here 
document.write("<div class='image'><a href='" + ItemImagesArray[ItemImagesArrayIndex] + "' target='_blank;'><img src='" + ItemImagesArray[ItemImagesArrayIndex] + "' width='246' class='Thumbnail-Image' /></a>"); 
document.write("<br /><a href='" + ItemImagesArray[ItemImagesArrayIndex] + "' target='_blank;' title='Click to open supersize image'>Click to open supersize image</a></div>"); 
// Ok we write the dividers here 
if (ItemImagesArrayIndex == 1) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 3) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 5) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 7) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 9) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 11) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
if (ItemImagesArrayIndex == 13) { document.write("<div class='Image-Gallery-Divider'><!-- No Content --></div>"); } 
} 
} 
} 
</script> 
     <div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" width="246" class="Thumbnail-Image"></a><br> 
     <a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake1.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div> 
     <div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" target="_blank"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" width="246" class="Thumbnail-Image"></a><br> 
     <a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/snake2.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div> 
     <div class="Image-Gallery-Divider"><!-- No Content --></div> 
     <div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" width="246" class="Thumbnail-Image"></a><br> 
     <a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard1.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div> 
     <div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" width="246" class="Thumbnail-Image"></a><br> 
     <a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard2.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div> 
     <div class="Image-Gallery-Divider"><!-- No Content --></div> 
     <div class="image"><a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" target="_blank;"> <img src="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" width="246" class="Thumbnail-Image"></a><br> 
     <a href="http://www.sweetvision.co.uk/ebayimages/snakeandlizard/lizard3.jpg" target="_blank;" title="Click to open supersize image">Click to open supersize image</a></div> 
    </div> 
    <div class="content"> 
     <div class="productdescription"> 
     <p> <span style="font-size:larger;"><strong>New Ladies bodycon Midi dress - New With Tags.</strong></span> </p> 
     <center> 
      <img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" /> 
     </center> 
     <h2>Description</h2> 
     <h4>Ladies super soft stretch fabric midi Bodycon dress available in either Snake Print or Black Lizard print.</h4> 
     <h4> These gorgeous, flattering Bodycon dresses are Brand new in their original packaging, and ready for that special occasion.</h4> 
     <h4>The dresses have the following features:</h4> 
     <h4> 
      <ul id="list"> 
      <li>Snake or Lizard print (exactly as shown in the pictures)</li> 
      <li>Midi length approximately 43 inches </li> 
      <li>Gorgeous figure hugging and flattering bodycon style</li> 
      <li>93% Viscose, 7% Elastane &minus; high quality soft fabric</li> 
      <li>Available in UK Sizes 6&minus;14</li> 
      </ul> 
     </h4> 
     <center> 
      <img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" /> 
     </center> 
     <h2>Sizes</h2> 
     <h4> 
      <ul id="list"> 
      <li>S &#40;Size 6 &#45;8&#41;</li> 
      <li>M &#40;Size 8 &#45;10&#41;</li> 
      <li>L &#40;Size 10 &#45;12&#41;</li> 
      <li>XL &#40;Size 12 &#45;14&#41;</li> 
      </ul> 
     </h4> 
     <center> 
      <img class="spacer" src="http://sweetvision.co.uk/ebayimages/MWT/break2pinkcurve.jpg" height="2" width="380" /> 
     </center> 
     <h2>Important</h2> 
     <h4>As stated in eBay's policies - if for any reason you are unhappy with the item you have purchased please contact me <span style="font-weight:bold">BEFORE</span> leaving feedback. I always have, and always do, everything within my power to resolve an issue and I pride myself on my customer service and the quality of my products.</h4> 
     <h4> By contacting me first it is only fair as it gives me chance to solve any issues and provide a professional and conscientious service that I set out to achieve.</h4> 
     </div> 
     <div class="deliverydetails"> 
     <h2>Delivery details</h2> 
     <h4>These items will be shipped in 1 working day with an estimated transit period of 2-3 days.</h4> 
     </div> 
     <div class="paymentdetails"> 
     <h2>Payment details</h2> 
     <h4>Payment by Paypal only.</h4> 
     <h4>Unfortunately we do not accept payment by cheque or postal order.</h4> 
     </div> 
    </div> 

    <!--end div element --> 

    <div id="footer"> 
     <div class="footerText"><a href="http://members.ebay.co.uk/ws/eBayISAPI.dll?ViewUserPage&userid=newhorizonproducts">about us</a> | <a href="http://stores.ebay.co.uk/New-Horizon-Products">Visit Store</a> | </div> 
     <!-- end .container --> 
     <div class="copy"> 
     <h1>Copyright &copy; New Horizon Products 2013 &#45; All Rights Reserved.</h1> 
     </div> 
    </div> 
    </div> 
</div> 
<!-- end .container --> 
</div> 
<!--STARTFROOGALLERY--> 
<!-- 
Copyright ©2009-2012 Frooition Ltd. All rights reserved. 
The following HTML, JavaScript and CSS Styling may not be used or reproduced in whole or in part, without the prior permission of Frooition. 
All eBay graphics not owned by eBay or eBay associations are the property of the eBay account owner and may not be used without their written authorisation. 
Any person or group of persons found to be in breach of this notice may face legal action. 
**From the froo apps center** 
--> 
<link href="http://user.froo.com/32b8225d1d6cfce239ee302226a863f3/FCS/css/froocross.css" rel="stylesheet" type="text/css"/> 
<script type="text/javascript"> 
var az = "SC";var bz = "RI";var cz = "PT";var dz = "SR";var ez = "C=";var fz = "http://user.froo.com/32b8225d1d6cfce239ee302226a863f3/FCS/js/froocross.js"; 
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+">");document.write("</"+az+bz+cz+">");var fz = "http://apps.froo.com/application/FCS/xpromo_content/jsvariable.php?key=32b8225d1d6cfce239ee302226a863f3"; 
document.write ("<"+az+bz+cz+" type='text/javascript'"+dz+ez+fz+">");document.write("</"+az+bz+cz+">");var fw = document.body.offsetWidth;document.write("<style>#froo-gallery-wrap { margin-left:"+((fw-600)/2)+"px; height:0px;}</style>"); 
</script> 
<div id="froo-gallery-wrap" name="froo-gallery-wrap"></div> 
</div> 
<script language="Javascript">buildFrooGallery();</script> 
<!--ENDFROOGALLERY--> 
</body> 
</html>

来源

2013-04-30 marky

+0

我会设置在complir或小提琴一个例子，但回答的图片问题的CSS设置垂直对齐：顶部，将调整您的图像到容器的顶部，除非你有某种的填充。同时使用萤火虫将帮助您调试有关CSS /样式问题的问题。当你拿到样品时让我知道，以便我可以看一看。 – Cam 2013-04-30 15:02:51

+0

谢谢我会看看，我确信它只是我犯的一个错误。 – marky 2013-04-30 15:03:25

+0

好的，谢谢cam。我会有更多的戏剧，看看什么是什么。感谢您的帮助到目前为止 – marky 2013-04-30 15:05:47

回答

0

这里这个固定。尝试这个。编辑最大高度以达到您想要的效果。

.Thumbnail-Image { 
    border: 0 none; 
    float: left; 
    margin: 10px 0 0 10px; 
    max-height: 549px; 
    padding: 0; 
    width: 246px; 
}

来源

2013-04-30 15:29:20 Cam

+0

感谢凸轮，我试过的代码，但似乎并没有太多发生 - 除非我做错了 – marky 2013-04-30 15:44:16

+0

更新你的jsfiddle，所以我可以看到。 – Cam 2013-04-30 15:51:04

+0

其实我在ebay列表中做了一些工作，所以我会再看看发生了什么，谢谢。 – marky 2013-04-30 15:51:45

相关问题

 相关问题