PHPのエコーテーブルイメージを1行で表示しますか？

私のデータベースから画像を表示する以下のPHPブロックがあります。私の問題は、画像を1つの行に表示し、画面からオーバーフローして、ユーザーが左から右にスクロールしてすべての画像を見ることができるようにすることです。このコードの現在の出力は、すべての画像がすべて1つのセルに表示され、1つのCOLUMNに表示されていることです。私はどのように私の製品ページの行を数え、それに応じて次の列の次のイメージを描くことになるでしょうか？私は画像を縦にではなく横に表示したい。PHPのエコーテーブルイメージを1行で表示しますか？

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

出典

2017-01-02 user7366442

あなたは

出力画像にコードを複数回使用する理由私はあなたが正しい、それ用のテーブルを必要としないと思う知っているのですか？

私はあなたがこのために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>' 
}

出典

2017-01-02 19:51:09

良い点が、これは質問に答えていません。これは答えではなくコメントとして配置する必要があります。 – ITWitch

@FlameDenise申し訳ありませんが、回答として役立つと思います –

PHPのエコーテーブルイメージを1行で表示しますか？

答えて

関連する問題