While语句中的PHP For循环计数

Question

I'm trying to figure out the best solution on how to output my html with the php while counting up on a div class.

This is my function that prints news:

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

What I am attempting is, where it shows <div class='column1'> I need it to count upward to class='column4' . When I attempt For loops or a second While loop I can sometimes get it to count but it always does a new line where I want these blocks to display side by side like normal.

So what is the best way to count up on my div class without it doing a line break after every block?

Answer 1

I assume that when you say 1 to 4 you want it to start over at 1 after 4. Just increment a counter and reset it when it reaches 4:

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

Or actually, you use LIMIT 4 in the query so you don't really need the if statement that resets it to 0 , as the loop will only iterate 4 times.

Answer 2

A pure html workaround to this would be to have the code like so:

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

But because you're echoing it that's not going to work. Another thing you can do is specify an inline-block css property for those columns. If you're using bootstrap you can just use col-xs-3 so that you can have 4 even columns.

If not, instead you're going to have to specify each of those classes to be width:25%

So to wrap up, in css:

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

And in 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>";
...

Hope that helps.