我正在进行这个项目,需要加载菜单中的不同项。我的想法是使用foreach循环来遍历它,这在我获得项目时很有效,但我不知道如何为每3个项目创建一行。
HTML
<div class="row box-2">
<div class="grid_4">
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/page-4_img07.jpg" alt=""></div></div>
<h3>Anteger convallis orci vel mi nelaoreet, at ornare lorem consequat. </h3>
<p>Vestibulum volutpatturpis ut massa commodo, quis aliquam massa facilisis.Integer convavel miberto merlonelaoreet, at ornare lorem consequat.</p>
<a href="#" class="btn">Read more</a>
</div>
<div class="grid_4">
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/page-4_img08.jpg" alt=""></div></div>
<h3>Genteger convallis orci vel mi nelaoreet, at ornare lorem consequat.</h3>
<p>Meestibulum volutpatturpis ut massa commodo, quis aliquam massa facilisis.Integer convavel miberto merlonelaoreet, at ornare lorem consequatre. </p>
<a href="#" class="btn">Read more</a>
</div>
<div class="grid_4">
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/page-4_img09.jpg" alt=""></div></div>
<h3>Ternteger convallis orci vel mi nelaoreet, at ornare lorem consequat. </h3>
<p>Testibulum volutpatturpis ut massa commodo, quis aliquam massa facilisis.Integer convavel miberto merlonelaoreet, at ornare lorem consequ.</p>
<a href="#" class="btn">Read more</a>
</div>
</div>
PHP
<?php
foreach ($menuItems as $dish => $item) {
?>
<div class="grid_4">
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/<?php echo $item[img];?>.jpg" alt="<?php echo $item[name]; ?>"></div></div>
<h3><?php echo $item[title]; ?></h3>
<a href="dish.php?item=<?php echo $dish; ?>" class="btn">Read more about <?php echo $item[title]; ?></a>
</div>
<?php
} ?>
<?php $i = 1; ?>
<?php
foreach ($menuItems as $dish => $item) {
?>
<?php if($i % 3 == 0 || $i == 1) { ?>
<div class="row box">
<?php } ?>
<div class="grid_4">
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/<?php echo $item[img];?>.jpg" alt="<?php echo $item[name]; ?>"></div></div>
<h3><?php echo $item[title]; ?></h3>
<a href="dish.php?item=<?php echo $dish; ?>" class="btn">Read more about <?php echo $item[title]; ?></a>
</div>
<?php if($i % 3 == 0 || $i == 1) { ?>
</div>
<?php } ?>
<?php $i++; ?>
<?php
} ?>
所以,如果我没有错的话,例如,如果你有7个项目,你会得到3行。2行3项,1行1项?
也许这个设置可以帮助你的菜单:
<?php
$itemsForRow = 3;
$itemTemplate = <<<'TEMPLATE'
<div class="img"><div class="lazy-img" style="padding-bottom: 76.21621621621622%;"><img data-src="images/%2$s.jpg" alt="%1$s"></div></div>
<h3>%1$s</h3>
<a href="dish.php?item=%3$s" class="btn">Read more about %1$s</a>
TEMPLATE;
if (count($menuItems) > 0) {
$itemCounter = 0;
foreach ($menuItems as $dish => $item) {
if ($itemsForRow > 0 && $itemCounter % $itemsForRow === 0) {
echo '<div class="grid_4">';
}
echo sprintf(
$itemTemplate,
$item["name"],
$item["title"],
$item["img"],
$dish
);
if ($itemsForRow > 0 && ($itemCounter % $itemsForRow === ($itemsForRow - 1) || $itemCounter == count($menuItems) - 1)) {
echo '</div>';
}
$itemCounter++;
}
}
?>