php并排加载数据库

<?php
        try {

            $stmt = $db->query('SELECT postID, postTitle, postDesc, postDate FROM blog_posts ORDER BY postID DESC');
            while($row = $stmt->fetch()){

                echo '<div>';
                    echo '<h1><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h1>';
                    echo '<p>Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'</p>';
                    echo '<p>'.$row['postDesc'].'</p>';             
                    echo '<p><a href="viewpost.php?id='.$row['postID'].'">Read More</a></p>';               
                echo '</div>';

            }

        } catch(PDOException $e) {
            echo $e->getMessage();
        }
    ?>

This code loads the data by rows. I need to load the data side by side.

Your question is a bit vague, you do not say what your actual issue is. You current solution explicitly generates markup such that details you visualized are placed in paragraph elements. Paragraph elements obviously get visualized vertically below each other.

If your issue really just is that you want to have the details aligned horizontally next to each other, then you have several approaches you can try:

First approach:

you can simply modify your style sheet rules (css) to display paragraph elements accordingly:

p {
  display: inline-block;
}

However that is considered ugly, since it breaks the semantic meaning of a paragraph...

Second approach:

You can simply change how you create your markup to something like that:

echo '<div>';
echo '<h1><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h1>';
echo '<div class="cell">Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'</div>';
echo '<div class="cell">'.$row['postDesc'].'</div>';             
echo '<div class="cell"><a href="viewpost.php?id='.$row['postID'].'">Read More</a></div>';               
echo '</div>';

Then add such a css rule to your style sheet definition:

div.cell {
  display: inline-block;
}

This is considered the clean and correct approach.

Third approach:

Similar to the second approach you can place the details inside table cells, so create a table structure to hold the data. This is very reliable, but it is considered a bit of a miss usage of tables for layouting... It also creates issues in the area of "barrier reduction" which is getting a more and more important aspect of todays web page design and usability thoughts. Also it does not allow the layout to adapt to different screen widths in a responsive manner, so you will run into layout problems with different devices like smartphones and tables.

So I would recommend against this approach.


Edit: OK, seems like this was all for nothing, because the question was, as remarked initially, vague. A typical example of much effort for nothing because of a question lacking precision...

So according to your comment here you want the outer divs to be aligned side by side.

Actually I already gave the answer above, but I can certainly repeat it here in a precise manner that matches what you ask in the comment:

Just clearly mark the containers to receive special alignment by adding a class:

echo '<div class="outer">';
echo '<h1><a href="viewpost.php?id='.$row['postID'].'">'.$row['postTitle'].'</a></h1>';
echo '<p>Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).'</p>';
echo '<p>'.$row['postDesc'].'</p>';             
echo '<p><a href="viewpost.php?id='.$row['postID'].'">Read More</a></p>';               
echo '</div>';

Then add a style rule for that:

div.outer {
  display: inline-block;
}

I created a fiddle demonstrating the effect: https://jsfiddle.net/oLrugrLn/