例)オンラインショップの商品一覧で、詳細表示から画像表示に切り替えた際に使用。
foreachのループの中で剰余をつかうことで、改行する箇所を特定し、必要なHTMLタグを出力する。
■app/views/items/index.ctp
<?php if (!empty($items)) : ?>
<table class="imgList">
<tr>
<?php $lastItem = $this->params['paging']['Item']['current']; ?>
<?php $i = 1; ?>
<?php $j = 4 - $i % 4; ?>
<?php foreach ($items as $key => $val) : ?>
<?php
$item = $val['Item'];
$shop = $val['Shop'];
?>
<td>
<div class="itemSection">
<?php echo $html->image(IMAGES_URL.'item'.DS.$item['id'].DS.'130.jpg',
array('alt'=>$item['name'], 'width' => 100, 'class' => 'itemListImg')) ?>
<p class="itemName"><?php echo $html->link($item['name'], DS.'items'.DS.'detail'.DS.$item['id'])?></p>
<p class="itemPrice">¥<?php echo number_format($item['price'])?></p>
<p class="shopName"><?php echo $shop['name']?></p>
</div>
</td>
<?php if ($i % 4 == 0) : ?>
</tr>
<?php elseif ($i == $lastItem) : ?>
<?php for ($k = 1; $k <= $j; $k++) : ?>
<td> </td>
<?php endfor; ?>
<?php endif; ?>
<?php $i++; ?>
<?php endforeach; ?>
</table>
<?php endif; ?>
■app/webroot/css/内のCSSファイル
table.imgList td{
border-bottom: 1px dotted #333;
padding: 10px 0;
margin-top: 10px;
width: 25%;
vertical-align: top;
}
div.itemSection{
margin-left: 10px;
}
div.itemSection img.itemListImg {
margin: 0 auto;
text-align: center;
display: block;
border:1px solid #999;
}
こちらもあわせてどうぞ