0

私は 360 グリッド システムでこれを達成しようとしています: http://imgur.com/4ZFll

データベースから、それぞれ 4 つの行に表示される製品を取得しています。

各カテゴリの下にちょうど 4 つの製品がある場合は完全に機能しますが、カテゴリ内の製品が 4 つ未満の場合、div が適切に閉じられていないため、デザインが台無しになります。問題は、ライン上に 3 つ以下の製品しかない場合があることです。

これを達成する方法を知っている人はいますか?

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';
    }

}

(タイトルについて申し訳ありません、私はこの質問を何と呼ぶべきか知りませんでした:))

4

3 に答える 3

1
echo '<div class="grid_3';

このタグを閉じていません。

于 2011-03-28T13:42:52.427 に答える
0
$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)

製品がない場合はFORでループし、空のDIVを出力するだけです。それがあなたが求めているものであれば...

于 2011-03-28T13:49:31.657 に答える
0

試してみてください

$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;
}
于 2011-03-28T14:34:12.453 に答える