我非常感谢有关图像布局问题的一些帮助。我确信这很容易解决，但我真的很难找出错误所在。
我已经创建了一个 ebay 列表，但是第一行中的第二张图片比第一张略低，并且还有一个图像堆叠问题 - 我似乎无法弄清楚为什么，这里是列表的链接：
http://www.ebay.co.uk/itm/330879734229?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
第三，我想在这里找到像这样的图像滑块和灯箱：
但我似乎找不到任何类似的东西，任何帮助我指向正确方向的帮助都会很棒。
这是 ebay 列表的代码：
<!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 − high quality soft fabric</li>
<li>Available in UK Sizes 6−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 (Size 6 -8)</li>
<li>M (Size 8 -10)</li>
<li>L (Size 10 -12)</li>
<li>XL (Size 12 -14)</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 © New Horizon Products 2013 - 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>