如何通过PHP实现SQL查询结果的多列动态数据展示？

嘿，我来帮你搞定这个多列布局的问题！首先先提个小细节：你原来的代码里拼接$link的时候少了一个闭合的双引号，这会导致链接失效，咱们先把这个小bug修复好，再搞定布局的事儿。

要实现多列布局，核心是用CSS布局属性（Flexbox 或 CSS Grid）来控制每个内容卡片的排列，PHP部分只需要把所有卡片放在一个统一的容器里就行。下面给你两种常用的实现方案：

方案一：Flexbox 布局（灵活适配，兼容性好） #

Flexbox是目前最常用的布局方式，能轻松实现换行和响应式排列。

步骤1：修改PHP代码，添加容器 #

把所有生成的卡片放在一个带类名的容器里：

// 先初始化容器
$output .= '<div class="card-container">';

while($row = mysqli_fetch_array($q)){ 
    $id = $row['id']; 
    $title = $row['title']; 
    $desc = $row['description']; 
    $link = $row['link']; 
    // 修复了link的引号问题，同时给每个卡片加类名
    $output .= '<a href="' . $link . '" class="card-item"> 
        <h3>' . $title . '</h3> 
        <p>' . $desc . '</p> 
    </a>'; 
}

// 闭合容器
$output .= '</div>';

步骤2：添加CSS样式 #

用Flexbox控制容器和卡片的排列：

.card-container {
    display: flex;
    flex-wrap: wrap; /* 空间不足时自动换行 */
    gap: 20px; /* 卡片之间的间距，可调整 */
    padding: 20px; /* 容器内边距 */
}

.card-item {
    flex: 1 1 300px; /* 响应式宽度：最小300px，剩余空间自动分配 */
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
}

.card-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.card-item p {
    margin: 0;
    line-height: 1.5;
}

方案二：CSS Grid 布局（规整网格，代码简洁） #

如果想要更规整的网格布局，CSS Grid会更省心，它能自动计算列数：

步骤1：PHP代码（和Flexbox方案的PHP代码一致） #

同样用.card-container容器包裹所有卡片，PHP代码和上面的方案一完全相同。

步骤2：添加CSS样式 #

.card-container {
    display: grid;
    /* 自动填充列，每列最小300px，最大占满剩余空间 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px; /* 卡片之间的间距 */
    padding: 20px;
}

/* 卡片样式和Flexbox方案一致，可直接复用 */
.card-item {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #333;
}

.card-item h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.card-item p {
    margin: 0;
    line-height: 1.5;
}

效果说明 #

两种方案都能实现你想要的多列效果，区别在于：

• Flexbox更适合需要灵活调整排列顺序、对齐方式的场景
• CSS Grid更适合规整的网格布局，代码更简洁

你可以根据自己的需求选择其中一种，调整minmax里的数值或者flex的参数就能改变列数和卡片宽度~

内容的提问来源于stack exchange，提问作者Cam Acc