我遇到了一个恼人的问题而且我不知道怎么解决这个问题，看起来很简单，但我还没弄清楚。你可以在这里看到问题：
（忽略测试文本和图像）
这是代码
<!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>Catalogo de molduras e acessórios - Los Amigos Molduras</title>
<link href="css/lightbox.css" rel="stylesheet" />
<link rel="shortcut icon" href="img/s.ico" type="image/x-icon" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" href="css/styles.css" rel="stylesheet" media="all" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="js/jquery.quicksand.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
</script>
<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
window.$zopim||(function(d,s){var z=$zopim=function(c){z._.push(c)},$=z.s=
d.createElement(s),e=d.getElementsByTagName(s)[0];z.set=function(o){z.set.
_.push(o)};z._=[];z.set._=[];$.async=!0;$.setAttribute('charset','utf-8');
$.src='//v2.zopim.com/?1z0K8re6WlsEq76WgGj4GiHJAmYnDYQ5';z.t=+new Date;$.
type='text/javascript';e.parentNode.insertBefore($,e)})(document,'script');
</script>
<!--End of Zopim Live Chat Script-->
<script type="text/javascript">
$(document).ready(function() {
var pageTitle = document.title; //HTML page title
var pageUrl = location.href; //Location of the page
//user hovers on the share button
$('#share-wrapper li').hover(function() {
var hoverEl = $(this); //get element
//browsers with width > 699 get button slide effect
if($(window).width() > 699) {
if (hoverEl.hasClass('visible')){
hoverEl.animate({"margin-left":"-117px"}, "fast").removeClass('visible');
} else {
hoverEl.animate({"margin-left":"0px"}, "fast").addClass('visible');
}
}
});
//user clicks on a share button
$('.button-wrap').click(function(event) {
var shareName = $(this).attr('class').split(' ')[0]; //get the first class name of clicked element
switch (shareName) //switch to different links based on different social name
{
case 'facebook':
var openLink = 'https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'twitter':
var openLink = 'http://twitter.com/home?status=' + encodeURIComponent(pageTitle + ' ' + pageUrl);
break;
case 'digg':
var openLink = 'http://www.digg.com/submit?phase=2&url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'stumbleupon':
var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'delicious':
var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'google':
var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&title=' + encodeURIComponent(pageTitle);
break;
case 'email':
var openLink = 'mailto:?subject=' + pageTitle + '&body=Found this useful link for you : ' + pageUrl;
break;
}
//Parameters for the Popup window
winWidth = 650;
winHeight = 450;
winLeft = ($(window).width() - winWidth) / 2,
winTop = ($(window).height() - winHeight) / 2,
winOptions = 'width=' + winWidth + ',height=' + winHeight + ',top=' + winTop + ',left=' + winLeft;
//open Popup window and redirect user to share website.
window.open(openLink,'Share This Link',winOptions);
return false;
});
});
</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
background-image:url(images/footer2.png);
position:absolute;
left:400px;
top:2072px;
width:472px;
height:356px;
z-index:1;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript">
jQuery("document").ready(function($){
var nav = $('.menu');
$(window).scroll(function () {
if ($(this).scrollTop() > -1) {
nav.addClass("scrolled_menu");
} else {
nav.removeClass("scrolled_menu");
}
});
});
</script>
<div id="losamigos_header_wrapper" class="menu">
<div id="share-wrapper">
<ul class="share-inner-wrp">
<!-- Facebook -->
<li class="facebook button-wrap"><a href="#">Facebook</a></li>
<!-- Twitter -->
<li class="twitter button-wrap"><a href="#">Tweet</a></li>
<!-- Google -->
<li class="google button-wrap"><a href="#">Plus Share</a></li>
<!-- Email -->
<li class="email button-wrap"><a href="#">Email</a></li>
</ul>
</div>
<div id="losamigos_header">
<div id="site_title">
<a href="index.html" target="_parent">
<img src="s.png" alt="css templates" width="44" height="50" />
<span></span>
</a>
</div>
<div id="losamigos_menu">
<ul>
<li><a href="index.html" target="_parent">Início</a></li>
<li><a href="quemsomos.html" target="_parent">Quem somos</a></li>
<li><a href="#" target="_parent">Blog</a></li>
<li><a href="#" class="current">Molduras</a></li>
<li><a href="products.php">Acessórios</a></li>
<li><a href="paineis.html">Telas e Painéis</a></li>
</ul>
</div>
</div>
</div>
<div id="losamigos_content_wrapper2">
<div id="Amigoscomponent"></div>
<div id="content">
<div id="gallerycontainer"><br />
<form action="products.php" method="post">
<table width="100%">
<tr><td align="right">
<input type="text" name="filter" value="" id="filter" placeholder="Digite o código."/>
<input type="submit" value="Pesquisar" id="search" />
</td></tr>
</table>
</form>
<div id="cute"></div>
<div id="cute2"></div>
<ul class="portfolio-area" style=" padding: 0px 0 20px 0; bottom: 50px; position:relative;">
<?php
include('db.php');
if(isset($_POST['filter']))
{
$filter = $_POST['filter'];
$result = mysql_query("SELECT * FROM products where Product like '%$filter%' or Description like '%$filter%' or Category like '%$filter%'");
}
else
{
$result = mysql_query("SELECT * FROM products");
}
while($row=mysql_fetch_assoc($result))
{
echo '<li class="portfolio-item2" data-id="id-0" data-type="cat-item-4">';
echo '<div>
<span class="image-block">
<a class="example-image-link" href="reservation/img/products/'.$row['imgUrl'].'" data-lightbox="example-set" title="'.$row['Product'].'""><img width="225" height="140" src="reservation/img/products/'.$row['imgUrl'].'" alt="'.$row['Product'].'" title="'.$row['Product'].'" />
</a>
</span>
<div class="home-portfolio-text">
<h2 class="post-title-portfolio"><font color="#666666">'.$row['Product'].'</font></h2>
<p class="post-subtitle-portfolio"><font color="#666666">Descrição: '.$row['Description'].'
<p class="post-subtitle-portfolio"><font color="#666666">Categoria: '.$row['Category'].'
<p class="post-subtitle-portfolio">Código: '.$row['Price'].'</p><br/></font></p>
</div>
</div>';
echo '</li>';
}
?>
<div class="column-clear"></div>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div id="losamigos_footer_wrapper">
<center>
<div class="cleaner_h30"></div>
<h6><font size="2"><br />Saiba mais</font></h6></center>
<div id="losamigos_footer">
<div class="footer_box">
<div class="cleaner_h40"><h6>Links</h6><br /></div>
<font color="#FFFFFF">Suporte Online Los Amigos</font><br /><br />
<font color="#FFFFFF">Webdesigner</font><br /><br />
<font color="#FFFFFF">Blog Los Amigos</font><br /><br />
<font color="#FFFFFF">Orçamentos</font><br /><br />
</div>
<div class="footer_box">
<h6>Endereços</h6>
<p><br /><h7><font size="1" face="arial">Existem atualmente duas unidades, a loja e a fábrica, que se encontram em:<br />
<br />Loja: Rua Marquês de Itu, 152 - Vila Buarque/SP<br />
Fábrica: Rua São Florêncio, 196 - Penha/SP<br /><br />
</font></h7><div id="mapa"><h6><font size="1" face="arial"><center>Ver no mapa</center></font></h6><a href="https://www.google.com.br/maps/place/Rua+Marqu%C3%AAs+de+Itu,+152+-+Vila+Buarque/@-23.5437545,-46.6458034,17z/data=!3m1!4b1!4m2!3m1!1s0x94ce584f4800d815:0x5a758bdc65ccabbb"><img src="images/maps.png" width="76" height="74" /></a> <a href="https://www.google.com.br/maps/place/Rua+S%C3%A3o+Flor%C3%AAncio,+196+-+Vila+Feliz/@-23.520112,-46.5298751,17z/data=!3m1!4b1!4m2!3m1!1s0x94ce5e30c6dd5d15:0x6739f0c9fa51f8c5"><img src="images/maps.png" width="76" height="74" /></a><br />
<h6><font size="1" face="arial"> (Loja) (Fábrica)</font></h6></div>
<p class="blog_section"><span><h7></h7><br />
</span></p>
</div>
<div class="footer_box">
<h6>Contato<br />
</h6>
<div id="fone2"><img src="images/fone.png" width="54" height="58" /></div><div id="fone" align="left"><h7><font size="1" face="arial">Tel (Loja): (11)3331-0453<br />
Tel (Fábrica): (11)2798-2278</font></h7>
</div><br /><h7><font size="1" face="arial">Encomendas de painéis personalizados por telefone devem ser feitas apenas na fábrica. Em caso de dúvidas, mande-nos um e-mail!<br /><br /> <a href="mailto:comercial@losamigosmolduras.com"><font color="#FFFFFF" >comercial@losamigosmolduras.com</font></a></font></h7>
</div><div class="footer_box">
<h6>Siga-nos</h6>
<div class="cleaner"></div>
<br />
<img src="images/facebook.png" width="79" height="75" /><img src="images/twitter.png" width="79" height="75" /><img src="images/youtube.png" width="79" height="75" /><br /><br /><h7><font size="1" face="arial">Em desenvolvimento o blog de nossa loja, trazendo todas as novidades e notícias para decorar a sua casa com estilo!<br /><br />Los amigos 1994 - 2014 Todos os direitos reservados.</font></h7></div>
<div class="cleaner"></div>
</div>
</div>
</body>
</html>
我该怎么做才能解决这个问题？
答案 0 :(得分：1)
这是浮动的“自然”效果，当你有不同高度的物品时 - 你的第一个项目略高于行中的下两个项目，所以下一行的第一个项目浮动在第二个项目下面第一行。
解决此问题的最简单方法：不要浮动项目，而是使用display:inline-block;vertical-align:top。 （请注意，这可能会对元素之间的空格产生什么影响。）