PHP for Loop Count in Whileステートメント

Question

私はdivクラスをカウントアップしながらphpで自分のhtmlを出力する方法について最善の解決策を見つけようとしています。

これはニュースを印刷し、私の機能である：私がしようとしています何

function post_news() 
{ 
    $post_news = $this->mysql->Query("SELECT * FROM news ORDER BY id DESC LIMIT 4"); 
    while ($news_row = mysqli_fetch_array($post_news)) 
    { 
     echo "<div class='column1'> 
      <div class='box'> 
      <h3>".$news_row['title']."</h3> 
      <p>".$news_row['content']."</p> 
      <a href='index.php?p=news&id=".$news_row['id']."' class='button button-small'>Read More</a> </div> 
      </div>"; 
    } 
} 

はそれが私はそれがclass='column4'に上向きにカウントする必要が<div class='column1'>を示し、ここで、です。 Forループや2回目のWhileループを試してみると時々カウントすることができますが、これらのブロックを通常のように並べて表示する新しい行が常にあります。

だから、ブロックごとに改行をせずにdivクラスをカウントアップする最も良い方法は何ですか？

Answer 1

私はあなたが1〜4を言うときあなたはそれだけでカウンタをインクリメントし、それが4に達したときにそれをリセット4.後に1からやり直したいと仮定します。

$num = 0; 
while ($news_row = mysqli_fetch_array($post_news)) 
    { 
     $num++; 
     echo "<div class='column{$num}'> 
      <div class='box'> 
      <h3>".$news_row['title']."</h3> 
      <p>".$news_row['content']."</p> 
      <a href='index.php?p=news&id=".$news_row['id']."' class='button button-small'>Read More</a> </div> 
      </div>"; 
     if($num == 4) { $num = 0; } 
    } 

それとも実際に、あなたがLIMIT 4を使用クエリは0にリセットされるifステートメントを実際には必要としないので、ループは4回しか反復しないためです。

<div class='column1'> 
... 
</div><div class='column2'> 
.. 
</div> 

をしかし、あなたはそれをエコーし​​ているので、仕事に行くのではないこと：

Answer 2

これまで純粋なHTMLの回避策はそうのようなコードを持っているだろう。もう1つのことは、これらの列にinline-block cssプロパティを指定することです。ブートストラップを使用している場合は、col-xs-3を使用して、4つの偶数列を持つことができます。

ない場合は、代わりにあなたは、CSSで、

width:25%だからアップラップするように、これらの各クラスを指定する必要があるとしている：

.col{ 
    width:25%;/*probably going to have make responsive for screen width*/ 
    display:inline-block;/*or float:left, whichever*/ 
} 

とPHP/HTMLで

：

... 
echo "<div class='column1 col'> 
      <div class='box'> 
      <h3>".$news_row['title']."</h3> 
      <p>".$news_row['content']."</p> 
      <a href='index.php?p=news&id=".$news_row['id']."' class='button button-small'>Read More</a> </div> 
      </div>"; 
... 

希望するものがあります。