360 grid -- Finish out row with odd number of records
I'm trying to accomplish this, with the 360 grid system: http://imgur.com/4ZFll
From a database i'm getting products which will be displayed in lines with 4 on each.
It's working perfectly if there is exactly 4 products under each category, but if there is less than 4 products in a category, the design is messed up, because the div's not closed properly. Problem is that sometimes there's only 3 or less products on a line.
Is there any of you who knows how to accomplish this?
for($i=0 ; $i<$countprod ; $i++){
$prevprod = $products[$i-1]['name'];
$curprod = $products[$i]['name'];
if($curprod != $prevprod){
echo '<div class="grid_12 alpha omega"><h2>'.$products[$i]['catname'].'</h2></div>';
}
if ($i == 0){ echo '<div class="grid_3 '; }
if ($i % 4 == 0) { echo ' alpha">'; }
elseif($i % 4 == 3) { echo '</div><div class="grid_3 omega">'; }
else{ echo '</div><div class="grid_3">';
}
echo $product[$i]['image'];
if ($i % 4 == 3) {
echo '</div><div class="clear"></div>';
echo '<div class="grid_3';
}
}
(sorry a开发者_StackOverflowbout the title, i didnt know what to call this question :) )
echo '<div class="grid_3';
You aren't closing this tag.
Have a try with
$countprod = count($product);
$prevprod = '';
$close_div = false;
for ($i=0; $i<$countprod; $i++){
$curprod = $products[$i]['name'];
if($curprod != $prevprod){
if ($close_div) echo '</div>';
echo '<div class="grid_12 alpha omega"><h2>'.$products[$i]['catname'].'</h2></div>';
}
if ($i % 4 == 0) {
echo '<div class="grid_3 alpha">';
$close_div = true;
}
elseif ($i % 4 == 3) {
echo '</div><div class="grid_3 omega">';
$close_div = true;
}
else {
echo '</div><div class="grid_3">';
$close_div = true;
}
echo $product[$i]['image'];
if ($i % 4 == 3) {
echo '</div><div class="clear"></div>';
$close_div = false;
}
$prevprod = $curprod;
}
$p = 10; // Current number of products
$ppr = 4; // Products per row
$x = $i % $ppr;
if($x != 0){
$countprod = $p + ($ppr - $x);
}
echo $countprod; // 12 (4 * 3)
Loop with FOR if there is no product just print empty DIV, if that's what you have asked...
精彩评论