<?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();
}
?>
此代码按行加载数据。我需要并排加载数据。
你的问题有点模糊，你没有说你的实际问题是什么。您当前的解决方案显式生成标记，以便将可视化的详细信息放置在段落元素中。段落元素显然在彼此下方垂直可视化。
如果您的问题真的只是您希望将细节水平对齐，那么您可以尝试几种方法：
第一种方法：
您只需修改样式表规则 (CSS( 即可相应地显示段落元素：
p {
display: inline-block;
}
然而，这被认为是丑陋的，因为它破坏了段落的语义含义......
第二种方法：
您可以简单地将创建标记的方式更改为类似内容：
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>';
然后将这样的 css 规则添加到样式表定义中：
div.cell {
display: inline-block;
}
这被认为是干净和正确的方法。
第三种方法：
与第二种方法类似，您可以将详细信息放在表格单元格中，因此请创建一个表格结构来保存数据。这是非常可靠的，但它被认为是有点错过了表格布局的用法......它还在"减少障碍"领域产生了问题，这是当今网页设计和可用性思想中越来越重要的方面。此外，它不允许布局以响应方式适应不同的屏幕宽度，因此您将遇到智能手机和桌子等不同设备的布局问题。
所以我建议不要这样做。
编辑：好吧，似乎这一切都是徒劳的，因为正如最初所说，这个问题很模糊。一个典型的例子，因为一个缺乏精确性的问题而白费了多少功劳......
因此，根据您在此处的评论，您希望外部div并排对齐。
实际上我已经在上面给出了答案，但我当然可以在这里以与您在评论中提出的要求相匹配的精确方式重复它：
只需通过添加一个类来清楚地标记容器以接收特殊对齐：
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>';
然后为此添加样式规则：
div.outer {
display: inline-block;
}
我创建了一个演示效果的fiddle：https://jsfiddle.net/oLrugrLn/