PHP回显表图像在一行?

时间:2017-01-02 18:33:08

标签: php jquery html css mysql

我有以下PHP块显示我的数据库中的图像。我的问题是,我希望图像显示在一个ROW中,直到它从屏幕溢出,用户能够从左向右滚动以查看所有图像。此代码的当前输出是所有图像都显示在一个单元格中并显示在一个列中。我将如何计算产品页面中的行并相应地描绘下一列中的下一个图像?我希望图像水平显示,而不是垂直显示。

.table-outter {
    border:2px solid white;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    overflow-x: scroll;
}
.hype{
    border-collapse:collapse; 
    border:1px solid #777;
    padding:5px 10px; 
    height:250px; 
    text-align:center;
    min-width: 250px; 
}
.popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 900;    
}
#popup{
    width: 100vw;
    height: 75vh;
    background: white;
    opacity: .8;
    margin: auto;
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 900;    
}
<?php
//CONNECT TO database
include "storescripts/connect_to_mysql.php"; 
//This block grabs the whole list for viewing
$dynamic_list = "";
$sql = mysql_query("SELECT * FROM products ORDER BY date_added DESC LIMIT 5");
$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"];
        $date_added = strftime("%b %d, %Y", strtotime($row["date_added"]));
        $dynamic_list .= '<table style="table-layout: fixed; margin:0px auto 0px auto; border-collapse:collapse; border:1px solid #777;">
                    <tr>
                      <td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>

<td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>

<td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>

<td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>

<td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>

<td class="hype"><a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a></td>
                    </tr>
                  </table>';
    }
} else{
    $dynamic_list = "There are no products listed in our store yet";
}
mysql_close();
?>
<html>
  <head>
    </head>
  <body>
    <div class="popup" id="popup">
              <div class="table-outter">
                <p>
                  <?php echo $dynamic_list; ?>
                </p>
              </div>
         </div>
    </body>
</html>

1 个答案:

答案 0 :(得分:0)

我不知道为什么你多次使用代码输出图像

我认为你不需要一张桌子,对吗?

我认为您可以使用For i = 1 To n For j = 1 To i Sum = a(i, j) For k = 1 To j-1 Sum = Sum - a(i, k) * a(j, k) If i > j Then a(i, j) = Sum / a(j, j) Else If Sum > 0 Then a(i, i) = Sqrt(Sum) Else ERROR 语句: for用于存储图片数量

$count