Question

我正在尝试多行图片，每行有6张图片。目前每行有4张照片，我不知道怎么做，所以我有6条。非常感谢任何帮助！

这是我的代码：

<?php 

$pageTitle = "Bright Punch Love";
$section = "home";
include('inc/products.php');

?>

<?php include('inc/header.php'); ?>

<div id="top"><img src="top.png" width="1337"></div>

<div class="shirts">

    <ul class= "shirts-section">
        <?php
        foreach($products as $product_id => $product) { 
            echo "<li>";
            echo '<a href="shirt.php?id=' . $product_id . '">';
            echo '<img src="' . $product["img"] . '" width= 200 alt="' . $product["name"] . '">';
            echo '<p id="details">$30 View Details</p>';
            echo "</a>";
            echo "</li>";
        }   
        ?>
    </ul>

</div>

<?php include('inc/footer.php'); ?>

<div id="bottom-index"><img src="bottom-index.png" width="1337"></div>

Answer 1

我建议使用%代替px。您还使用width标记。尽量避免在html代码中使用css。请改用class="..."，并将您的css文件包含在head标记中。我现在把文件放在头脑中，因为它对你来说更容易。但我建议只为css制作一个文件。

<head>
    <style type="text/css">
        .picture{
            width : 15%;
        }
    </style>
</head>

echo '<img src="' . $product["img"] . '" class=\"picture\" alt="' . $product["name"] . '">';

Answer 2

使用PHP的array_chunk函数缩短答案。试试吧。

$products_new = array_chunk($products, 6);
foreach($products_new as $product_id => $product) {

//Your code

}

在一条线上得到6张照片

2 个答案: