1

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?

2 Answers 2

3

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.

Sign up to request clarification or add additional context in comments.

Comments

1

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.

1 Comment

This is a good CSS workaround thank you, I will keep this in mind for later. I went with AbraCadaver's answer because it did exactly what I needed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.