如何将PHP单列展示的博客文章修改为三列不等量分栏布局

你需要先把查询到的已发布文章先统一存入数组，再按位置分配到三列中，配合CSS实现布局效果，修改步骤如下：

步骤1：修改PHP数据读取逻辑 #

把原来直接循环输出的逻辑改成先归集有效文章：

<?php
$posts = []; // 存储所有有效已发布文章
$query = "SELECT * FROM posts WHERE tag='us' ORDER BY updated_on DESC";
$run_query = mysqli_query($conn, $query) or die(mysqli_error($conn));
if (mysqli_num_rows($run_query) > 0) {
    while ($row = mysqli_fetch_assoc($run_query)) {
        if ($row['status'] === 'published') {
            $posts[] = $row; // 仅存入已发布的文章
        }
    }
}
if (empty($posts)) {
    echo "暂无发布的文章";
}
?>

步骤2：新增CSS布局样式 #

定义三列网格布局，以及首篇文章的放大样式：

/* 三列容器 */
.post-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* 第一列占比更宽，适配大文章 */
    gap: 2rem;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.post-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
/* 首篇特稿样式 */
.featured-post .post-img img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
}
.featured-post .post-title {
    font-size: 2rem;
    margin: 1rem 0;
}
.featured-post .post-excerpt {
    font-size: 1.1rem;
    line-height: 1.6;
}
/* 普通文章样式 */
.normal-post .post-img img {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: cover;
}
.normal-post .post-title {
    font-size: 1.2rem;
    margin: 0.8rem 0;
}
.normal-post .post-excerpt {
    font-size: 0.95rem;
    line-height: 1.5;
}
.post-meta {
    font-size: 0.85rem;
    color: #666;
    margin-top: 0.5rem;
}
.post-meta a {
    color: #333;
    text-decoration: none;
}

步骤3：分列渲染文章 #

在页面输出位置按列渲染对应文章：

<?php if (!empty($posts)): ?>
<div class="post-grid">
    <!-- 第一列：仅首篇特稿 -->
    <div class="post-column">
        <div class="featured-post">
            <div class="post-img">
                <img src="allpostpics/<?php echo $posts[0]['image']; ?>" alt="<?php echo htmlspecialchars($posts[0]['title']); ?>">
            </div>
            <h3 class="post-title">
                <a href="publicposts.php?post=<?php echo $posts[0]['id']; ?>"><?php echo htmlspecialchars($posts[0]['title']); ?></a>
            </h3>
            <p class="post-excerpt"><?php echo substr(htmlspecialchars($posts[0]['content']), 0, 300) . '.........'; ?></p>
            <div class="post-meta">
                <p>Posted on <?php echo $posts[0]['postdate']; ?></p>
                <p>By <a href="#"><?php echo htmlspecialchars($posts[0]['author']); ?></a></p>
            </div>
        </div>
    </div>

    <!-- 第二列：2篇普通文章 -->
    <div class="post-column">
        <?php for ($i = 1; $i <= 2; $i++): ?>
            <?php if (isset($posts[$i])): ?>
            <div class="normal-post">
                <div class="post-img">
                    <img src="allpostpics/<?php echo $posts[$i]['image']; ?>" alt="<?php echo htmlspecialchars($posts[$i]['title']); ?>">
                </div>
                <h3 class="post-title">
                    <a href="publicposts.php?post=<?php echo $posts[$i]['id']; ?>"><?php echo htmlspecialchars($posts[$i]['title']); ?></a>
                </h3>
                <p class="post-excerpt"><?php echo substr(htmlspecialchars($posts[$i]['content']), 0, 150) . '.........'; ?></p>
                <div class="post-meta">
                    <p>Posted on <?php echo $posts[$i]['postdate']; ?></p>
                    <p>By <a href="#"><?php echo htmlspecialchars($posts[$i]['author']); ?></a></p>
                </div>
            </div>
            <?php endif; ?>
        <?php endfor; ?>
    </div>

    <!-- 第三列：3篇普通文章 -->
    <div class="post-column">
        <?php for ($i = 3; $i <= 5; $i++): ?>
            <?php if (isset($posts[$i])): ?>
            <div class="normal-post">
                <div class="post-img">
                    <img src="allpostpics/<?php echo $posts[$i]['image']; ?>" alt="<?php echo htmlspecialchars($posts[$i]['title']); ?>">
                </div>
                <h3 class="post-title">
                    <a href="publicposts.php?post=<?php echo $posts[$i]['id']; ?>"><?php echo htmlspecialchars($posts[$i]['title']); ?></a>
                </h3>
                <p class="post-excerpt"><?php echo substr(htmlspecialchars($posts[$i]['content']), 0, 120) . '.........'; ?></p>
                <div class="post-meta">
                    <p>Posted on <?php echo $posts[$i]['postdate']; ?></p>
                    <p>By <a href="#"><?php echo htmlspecialchars($posts[$i]['author']); ?></a></p>
                </div>
            </div>
            <?php endif; ?>
        <?php endfor; ?>
    </div>
</div>
<?php endif; ?>

补充说明 #

• 代码已修复原代码中多余的</a>闭合标签、重复class属性的问题，同时新增了htmlspecialchars处理输出内容，避免XSS安全风险
• 若文章数量不足6篇，对应位置会自动留空不会报错，可根据业务需求调整每列展示的文章数量
• 可自行调整CSS中的列宽比例、字体大小、图片高度等参数匹配站点设计风格

内容的提问来源于stack exchange，提问作者Ethan Denis