HTML和CSS中的圖像間距問題
[英]Image spacing issue in html and css
問題描述
對於圖像布局問題，我將不勝感激。 我敢肯定這是一個簡單的解決方法，但我真的很想找出錯誤所在。
我創建了一個ebay清單，但是第一行中的第二張圖片比第一張圖片稍低，並且還有一個圖片堆疊問題-我似乎無法弄清楚為什么，這里是該清單的鏈接：
http://www.ebay.co.uk/itm/330879734229?var=&ssPageName=STRK:MESELX:IT&_trksid=p3984.m1555.l2649
第三，我想實現andimage滑塊和燈箱，如下所示：
但是我似乎找不到任何類似的東西，對我指明正確方向的任何幫助都會很棒。
這是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>
1 個解決方案
解決方案1
0 2013-04-30 15:29:20
在這里修復它。 嘗試這個。 編輯最大高度以達到所需的效果。
.Thumbnail-Image {
border: 0 none;
float: left;
margin: 10px 0 0 10px;
max-height: 549px;
padding: 0;
width: 246px;
}
表格中圖像的間距問題 - HTML 和 CSS
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.