-2

我试图以网格类型的方式在 PHP 中显示 mysql 的输出！

我正在使用这段代码：

<?php 
// Run a select query to get my letest 6 items
// Connect to the MySQL database  
include "config/connect_to_mysql.php"; 
$dynamicList = "";
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 6");
$productCount = mysql_num_rows($sql); // count the output amount
if ($productCount > 0) {
    while($row = mysql_fetch_array($sql)){ 
             $id = $row["id"];
             $product_name = $row["product_name"];
             $price = $row["price"];
             $date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
             $dynamicList .= '<div class="shadow" id="products_holder"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" width="160" height="150" border="0" /></a>£' . $price . '<br></br>' . $product_name . '</div>';
    }
} else {
    $dynamicList = "We have no products listed in our store yet";
}
mysql_close();
?>

它工作得很好，但它不会以网格方式输出数据！

一切都在彼此之下，而不是像行一样在顶部说 5 和在底部说 5！

互联网上有一些关于网格输出的教程，但它使用表格，我使用的是 Div。所以这就是我感到困惑和卡住的地方。

4

2 回答 2

0

如果你想使用 div 而不是表格：

  • 不要对所有项目使用相同的 id，您稍后会遇到问题。相反，使用多个类。

  • 添加一些 CSS 使每个盒子都成为div一个有限大小的盒子，例如

    .shadow { 宽度：20%; 向左飘浮; 填充：10px；}

    达到网格效果。如果项目的高度不同，您可能会遇到问题，因此您必须确保它（相同大小的图像等）或使用一些 javascript 使它们具有相同的高度。

于 2013-02-22T12:43:05.110 回答
0

尝试这样的事情并根据您的需要进行修改：

$dynamicList .= '<div class="shadow tr" id="products_holder"><div class="td"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" width="160" height="150" border="0" /></a></div><div class="td" >£' . $price . '<br></br>' . $product_name . '</div></div>';

并使用一些CSS作为：

<style type="text/css">
 .tr{float:left;width:200px;}
 .td{float:left;width:160px;height:150px;border:1px solid black;}
</style>

最后但并非最不重要的一点是，从您的代码中删除 id="products_holder" 因为它会生成多个具有相同 id 的 div，这是一种不好的坏习惯。

更新： 对于您的新问题，即您想单独放置 5 行，这样的东西应该可以工作：

 if($i==0 || $i % 5 == 0){ 
 $dynamicList .= '<div class="table">';
  } 
$dynamicList .= '<div class="shadow tr" id="products_holder"><div class="td"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" width="160" height="150" border="0" /></a></div><div class="td" >£' . $price . '<br></br>' . $product_name . '</div></div>';
 if($i==0 || $i % 5 == 0){ 
  $dynamicList .= '</div><div style="clear:both"></div>';// div-table ends here
 }

修改你的css并添加一个类：

<style>
.table{float:left;width:160px;}
</style>
于 2013-02-22T12:53:05.923 回答