-1

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

在此处输入图像描述

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 行？

谢谢

4

3 回答 3

2

从查看代码来看，似乎没有任何东西可以“强制”五行，您可以简单地将其更改为四行。父元素的宽度很可能自然导致项目以五行出现。如果是这种情况，您有几个选择。您可以添加左边距和/或右边距或更改项目的宽度以使其更宽并强制它们更快地溢出到下一行。或者，您可以在 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>";
}
}
于 2012-10-26T16:45:23.677 回答
0

您的产品当前设置为浮动，宽度为 150 像素。由于您处于浮动状态，它将继续添加项目，直到它们不适合（即，如果您的项目在 75 像素宽的容器中为 10 像素宽并且您添加 8，您将在一个“行”上看到 7，而在下一个）。您可以简单地增加宽度以适合您的产品所在的容器，直到每“行”有 4 个项目。您的边距和任何填充也会增加这一点，因此请记住这一点。

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

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

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

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

.item {
    ...
}

<div class='item'>...</div>
于 2012-10-26T16:48:01.167 回答
0

据我所知，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; }
于 2012-10-26T17:05:53.503 回答