Question

我从mysql数据库获取所有数据并使用php while循环显示在CSS Div框 {class = box} 中。现在所有数据都显示完美，但我发现盒子之间存在很大差距。我怎样才能消除差距/空间？它看起来像下图：

enter image description here

我正在使用以下CSS代码：

.box{
    float:left;
    position: relative;
    width:320px;    
    border:1px #ccc solid;
    padding:5px;
    margin:0 5px 5px 0;
}

它应该显示为http://www.pinterest.com/主页。

这是php代码：

<?php
$query =  mysql_query("SELECT DISTINCT * FROM keyword_type ORDER BY keyword_full_name ASC");
$numType =  mysql_num_rows($query);

while($result = mysql_fetch_array($query)){ 

    $typeID =  $result['keyword_typeID'];
    $keywordType =  strtoupper($result['keyword_full_name']);

    echo "<div class='box'>";

    echo "<h3><strong>$keywordType</strong></h3>";
    $query2 =  mysql_query("SELECT * FROM keywords WHERE keyword_typeID = '$typeID' ORDER BY keywordName ASC ");
    $num2 =  mysql_num_rows($query2);

    while($result2 =  mysql_fetch_array($query2)){

        $kid = $result2['kid'];
        $keywordName = ucfirst($result2['keywordName']);

        $query4 =  mysql_query("SELECT kid FROM userkeywords WHERE cdid = '$cdid' AND kid='$kid'");
        $num = mysql_num_rows($query4);

        if($num > 0){
            $class = "keywordHighlight";    
        }else{
            $class = "";
        }

        echo "<div onclick='keywordclick($kid,$cdid);' class='$class'>$keywordName</div>";          


    }
    echo "</div>";

}

?>

任何帮助？

Answer 1

我通过将页面分成列来解决了类似的问题。然后，div基本上在彼此之下。这是一个简单的，仅限CSS的解决方案，但它并不完美。页面底部有一个间隙，在此之上，顺序会从水平顺序变为垂直顺序。

尽管如此，它可能对您有用。这是用于的页面：

http://www.eftepedia.nl/lemma/Categorie%C3%ABn

您可以使用CSS列执行此操作，如下所示：

.container {
    -webkit-columns: auto 3; /* Chrome, Safari, Opera */
    -moz-columns: auto 3; /* Firefox */
    columns: auto 3;
}

对于这些框，您可以使用break-inside: avoid-column;来避免它们突破多个列。有关具体问题的详细信息，另请参阅this question。

将它放在一个最小的例子中：http://jsfiddle.net/02f4wqcm/

Answer 2

您需要使用jQuery删除空格。

尝试以下库

http://isotope.metafizzy.co/layout-modes.html

http://packery.metafizzy.co/options.html

使用CSS消除Div框之间的差距

2 个答案: