产品之间的空间

时间：2014-03-23 17:40:53

标签： html css whitespace floating

我遇到了一个恼人的问题而且我不知道怎么解决这个问题，看起来很简单，但我还没弄清楚。你可以在这里看到问题：

（忽略测试文本和图像）

这是代码

<!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) + '&amp;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&amp;url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'stumbleupon':
                    var openLink = 'http://www.stumbleupon.com/submit?url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'delicious':
                    var openLink = 'http://del.icio.us/post?url=' + encodeURIComponent(pageUrl) + '&amp;title=' + encodeURIComponent(pageTitle);
                    break;
                case 'google':
                    var openLink = 'https://plus.google.com/share?url=' + encodeURIComponent(pageUrl) + '&amp;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" />&nbsp;&nbsp;
                </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>

我该怎么做才能解决这个问题？

1 个答案:

答案 0 :(得分：1)

这是浮动的“自然”效果，当你有不同高度的物品时 - 你的第一个项目略高于行中的下两个项目，所以下一行的第一个项目浮动在第二个项目下面第一行。

解决此问题的最简单方法：不要浮动项目，而是使用display:inline-block;vertical-align:top。 （请注意，这可能会对元素之间的空格产生什么影响。）

相关问题
最新问题