【问题标题】:PHP echo table images in one row?一行中的PHP回显表图像?
【发布时间】:2017-05-16 20:24:57
【问题描述】:

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

.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>

【问题讨论】:

    标签: php jquery html css mysql


    【解决方案1】:

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

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

    我认为您可以为此使用for 声明: $count 存储图片数量

    for ($i=0; $i < $count ; $i++) { 
      $list = '<a href="product.php?id=' . $id . '"><img src="inventory_images/' . $id . '.jpg" alt="' . $product_name . '" width="250" height="250" border="1" /></a>'
    }
    

    【讨论】:

    • 好点,但这并不能回答问题。这应该作为评论而不是答案。
    • @FlameDenise 很抱歉,我认为这可能会有所帮助
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-08-28
    • 1970-01-01
    相关资源
    最近更新 更多