-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

次のようなものを試して、必要に応じて変更してください。

$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 に答える
0

テーブルの代わりに div を使用する場合:

  • すべてのアイテムに同じ ID を使用しないでください。後で問題が発生します。代わりに、複数のクラスを使用してください。

  • div次のように、それぞれを制限されたサイズのボックスにする CSS を追加します。

    .shadow { 幅: 20%; フロート: 左; パディング: 10px; }

    グリッド効果を実現します。アイテムの高さが同じでない場合、問題が発生する可能性が高いため、同じ高さを確保するか (同じサイズの画像など)、javascript を使用して同じ高さにする必要があります。

于 2013-02-22T12:43:05.110 に答える