Html 使用CSS消除Div框之间的间隙

我从mysql数据库获取所有数据，并使用php while循环在CSS Div box{class=box}中显示。现在所有的数据都显示得很完美，但我发现盒子之间有很大的差距。如何消除间隙/空间？如下图所示：

我正在使用以下CSS代码：

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

它应该像主页一样显示。

<?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>";

}

?>

以下是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>";

}

?>

---

您需要使用jQuery删除空格

尝试以下库


您需要使用jQuery删除空格

尝试以下库


我通过将页面划分为列解决了类似的问题。然后，两个div基本上位于彼此下方。这是一个简单的、只使用CSS的解决方案，但并不完美。页面底部有一个缺口，在这个缺口之上，顺序当然会从水平顺序变为垂直顺序

不过，它可能对您有用。这是使用它的页面：


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

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

对于可以使用的框，请使用
break-inside:avoid-column以避免它们在多个列上断开。
另请参阅，以了解有关该问题的具体信息

用一个简单的例子将其组合在一起：
我通过将页面划分为列解决了一个类似的问题。然后，两个div基本上位于彼此下方。这是一个简单的、只使用CSS的解决方案，但并不完美。页面底部有一个缺口，在这个缺口之上，顺序当然会从水平顺序变为垂直顺序

不过，它可能对您有用。这是使用它的页面：


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

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

对于可以使用的框，请使用
break-inside:avoid-column以避免它们在多个列上断开。
另请参阅，以了解有关该问题的具体信息

用一个简单的例子将其组合起来：
特定框的负边距将帮助您…@C-linkNepal如何做到这一点？这里与PHP无关。它是关于设计输出的样式；它来自PHP/MySQL这一事实对你的问题没有影响。@Shibbir：我真诚地建议删除PHP/MySQL内容，而不是发布生成的HTML。我认为@lxg是在谈论代码。因为这是一个标记问题，所以只有输出的HTML是相关的。我们将无法运行此代码。特定框的负边距将帮助您…@C-linkNepal我如何才能做到这一点？这里与PHP无关。它是关于设计输出的样式；它来自PHP/MySQL这一事实对你的问题没有影响。@Shibbir：我真诚地建议删除PHP/MySQL内容，而不是发布生成的HTML。我认为@lxg是在谈论代码。因为这是一个标记问题，所以只有输出的HTML是相关的。我们不可能运行这个代码。哇！正是我想要的！但他们是如何做到这一点的呢？我添加了解释和小提琴，这也清楚地显示了垂直顺序。我希望这对你来说不是个问题。也可以看看旧浏览器的polyfill哇！正是我想要的！但他们是如何做到这一点的呢？我添加了解释和小提琴，这也清楚地显示了垂直顺序。我希望这对您来说不是问题。请参阅针对旧浏览器的polyfill