PHP/CSS布局问题：MSSQL订单号与状态需3列对应滚动显示

问题说明 #

从MSSQL数据库展示订单号及其状态时，出现布局问题：所有订单号垂直排列在上，所有状态垂直排列在下，订单号与对应状态无法相邻绑定显示。需要实现3列布局，让所有订单信息可滚动，且单条订单的号和状态始终绑定在一起。

原代码问题分析 #

1. 两次独立查询数据库，分别输出订单号和状态，导致数据无法一一对应绑定
2. HTML结构错误：<ul>下直接输出文本（订单号），<li>标签使用混乱，未将单条订单的号和状态包裹在同一容器中
3. 缺少必要的CSS样式实现多列布局和滚动效果

修正后的完整代码 #

HTML+PHP部分 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/agrah.css">
    <title>AGRAH</title>
    <style>
        /* 样式可迁移到agrah.css文件中 */
        .order-container {
            max-height: 80vh; /* 限制容器高度，触发滚动 */
            overflow-y: auto;
            padding: 1rem;
        }
        .order-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr); /* 3列等宽布局 */
            gap: 1rem;
        }
        .order-item {
            padding: 0.8rem;
            border: 1px solid #eee;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
        .order-num {
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        .order-status {
            color: #555;
        }
    </style>
</head>
<body>
    <div class="order-container">
        <div class="order-grid">
            <?php
            // 单次数据库连接，同时查询订单号与状态
            $dsn = "Zeshop";
            $user = "sa";
            $password = "mrsushi";
            $conn = odbc_connect($dsn, $user, $password);

            if ($conn) {
                // 合并SQL查询，一次性获取关联数据
                $sql = <<<EOF
                        SELECT [enc_cmd_num], [enc_prepared]
                        FROM [encaissement]
                        WHERE enc_date= '20221130'
                        EOF;

                $results = odbc_exec($conn, $sql);

                if ($results) {
                    while($resultrow = odbc_fetch_array($results)) {
                        $orderNum = $resultrow["enc_cmd_num"];
                        // 转换状态值为文本描述
                        switch($resultrow['enc_prepared']){ 
                            case 0:
                                $status = "Commande en attente";
                                break;
                            case 1:
                                $status = "Commande en cours de préparation";
                                break;
                            default: 
                                $status = "Unknown";
                        }
                        // 输出单条订单的完整结构
                        echo "<div class='order-item'>";
                        echo "<div class='order-num'>{$orderNum}</div>";
                        echo "<div class='order-status'>{$status}</div>";
                        echo "</div>";
                    }
                } else {
                    echo "<p>查询失败</p>";
                }
                odbc_close($conn);
            } else {
                echo "<p>数据库连接失败</p>";
            }
            ?>
        </div>
    </div>
</body>
</html>

关键修改点 #

• 合并数据库查询：单次查询同时获取订单号和状态，确保数据一一对应绑定
• 重构HTML结构：用网格布局容器替代混乱的列表结构，将单条订单的号和状态包裹在同一个.order-item容器中
• CSS实现需求效果：
  • grid-template-columns: repeat(3, 1fr)实现3列等宽布局
  • 外层容器设置max-height和overflow-y: auto，实现订单内容滚动
  • 给订单项添加基础样式，提升视觉可读性

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