我正在尝试多行图片,每行有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>
我建议使用%
而不是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"] . '">';
使用PHP的array_chunk函数缩短答案。试试看。
$products_new = array_chunk($products, 6);
foreach($products_new as $product_id => $product) {
//Your code
}