使用CSS删除Div框之间的间隙 [英] Remove gap between Div box using CSS

问题描述

我从mysql数据库获取所有数据，并使用php while循环在CSS Div框中显示 {class = box} 。现在所有的数据都显示完美，但我看到在盒子之间有一个很大的差距。如何清除间隙/空间？它看起来像下面的图片：

I'm getting all data from mysql database and showing in CSS Div box {class = box} using php while loop. Now all data is showing perfectly but I see that there a big gap between the boxes. How can i remove the gap/space ? It's look like the following image:

我使用以下CSS代码：

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

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

It's should be show like http://www.pinterest.com/ home page.

这里是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>";

}

?>

任何帮助？

推荐答案

我通过将页面分成列解决了类似的问题。这些div基本上是在下面。这是一个简单的，只有CSS的解决方案，但它不是完美的。在页面底部有一个空白，在上面，顺序从水平顺序改为垂直顺序。

I solved a similar issue by dividing the page into columns. The divs are then basically underneath each other. This is a simple, CSS only solution, but it's not perfect. There is a gap at the bottom of the page, and above that, the order changes of course from a horizontal to a vertical ordering.

然而，它可能对于您。这是它用于的页面：

Nevertheless, it might be useful for you. This is the page it is used on:

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

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

You can do this with CSS columns, like this:

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

对于盒子你可以使用 break- avoid-column; ，以避免它们打破多个列。
有关详情，请参阅此问题具体问题。

For the boxes you can use break-inside: avoid-column; to avoid them breaking over multiple columns. Also see this question for more information about specific issues with that.

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

Bringing it together in a minimal example fiddle: http://jsfiddle.net/02f4wqcm/

这篇关于使用CSS删除Div框之间的间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！