在行中显示数据库中的项目

Question

此图片显示了我网站的主页。

http://i163.photobucket.com/albums/t315/smc22_2007/Website.png

我想要4行，而不是5行。

这是我的php代码：

<?php

$query = "SELECT * FROM UFPProducts";
$results = mysql_query ($query, $connect);

while ($row = @ mysql_fetch_array($results))
{

print



"<div id= 'item'>" .

"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".

"</div>";
}

以下是上面的CSS：

#item {
    width:100px;
    text-align:center;
    border: 1px solid #D9D9D9;
    padding: 0px;
    list-style: none;
    width: 150px;
    float: left;    
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 10px;
    -moz-border-radius: 10px; /* firefox rounded corners */
    -webkit-border-radius: 10px; /* Safari rounded corners */
    min-height: 220px;
}



#item li h1 {
text-align:center:
}

#item li#white{
    min-height: 220px;
}

如何显示4行而不是5？

三江源

Answer 1

从查看代码开始，似乎没有任何“强制”行可以简单地改为四行。很有可能父元素的宽度自然导致项目以五行显示。如果是这种情况，您有几个选择。您可以添加左边距和/或右边距或更改项目的宽度以使其更宽并迫使它们更快地溢出到下一行。或者，您可以在PHP中实现一个计数器，该计数器将在每四个项后添加<br>标记（或类似）。您也可以缩小父元素，尽管这可能不是一个选项。 CSS选项很简单，在#item中，增加宽度：

#item {
    width:100px;
    /*... other css ...*/
}

在PHP中：

<?php
//rest of code
$counter=0;
while ($row = @ mysql_fetch_array($results))
{

print



"<div id= 'item'>" .

"<p>Product id ".$row["ProductID"]."</p>".
"<p><img src=".$row["Image"]."></p>".
"<p>&pound".$row["Price"]."</p>".
"<p>".$row["Description"]."</p>".

"</div>";
$counter++;
if ($counter==3) {
    $counter=0;
    print "<br>";
}
}

Answer 2

您的产品目前设置为浮动，宽度为150px。由于你是浮动的，它会继续添加物品，直到它们不适合（例如，如果你的物品在75px宽的容器中宽10px而你加8，你会看到7在一个'行'上有1个在下一个）。您可以简单地增加宽度以适合您的产品所在的容器，直到每个'行'有4个项目。你的边距和任何填充也会增加这一点，所以记住这一点。

#item {
    ...
    width: 200px;
    ...
}

如果您不想增加产品单元格的宽度，请增加边距以增加元素的有效宽度。

#item {
    ...
    margin-right: 20px;
    ...
}

您还应该更新您的项目以使用类而不是ID，因为ID应该在页面上是唯一的。

.item {
    ...
}

<div class='item'>...</div>

Answer 3

据我所知，while循环不强制执行任何限制。我的建议是这样的：

$i = 1;
$cssClass = 'item';
$columns = 4;
while ($row = @ mysql_fetch_array($results))
{
    $class = $cssClass;
    if (($i % $columns) == 0) {
        $class .= ' clear';
    }
    print "<div id='{$class}'>" .
        "<p>Product id " . $row["ProductID"] . "</p>" .
        "<p><img src=" . $row[" Image"] . "></p>" .
        "<p>&pound" . $row["Price"] . "</p>" .
        "<p>" . $row["Description"] . "</p>" .
        "</div>";
    $i++;
}

然后在css中定义：

.clear { clear:both; }