如何用PHP和CSS实现数据的列状展示？

当前卡片效果：

我在使用PHP和CSS实现数据的列状展示时遇到了困难，尝试查找类似问题未找到结果，请问是否应该使用表格？或者有其他解决方案？

我的PHP代码 #

<?php 

    include '../DBConnector.php';

    $menuQuery = "SELECT * FROM menu";
    $menuResult = $conn->query($menuQuery);

    if ($menuResult->num_rows > 0) {

    
        while ($row = $menuResult->fetch_assoc()) {

            echo "<link rel='stylesheet' href='../css/cards.css'> ";
            echo "<link rel='stylesheet' href='../css/style.css'>";
            echo "<link rel='stylesheet' href='../css/buttons.css'>";

            echo "<div class='cards-container'>";
                echo "<div class ='cards'>";
                    echo "<img class = 'center' src = '" . $row['food_image'] . "' alt = ' " .$row['food_name'] . " '>";
                    echo "<div class = 'container'>";
                        echo "<h4><b>" . $row['food_name'] . "</b></h4>";
                        echo "<form action = 'food-view.php' method='post'> 
                            <button type='submit'> Order </button>
                        </form>"; 
                    echo "</div>";                    
                echo "</div>";
            echo "</div>";
        }


    }

?>

卡片的CSS代码 #

.cards-container{
    position: relative;
    top: 25px;
}

.cards {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    margin: auto;
    width: 300px;
    border-radius: 5px;
    text-align: center;

}

.cards:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
    float: left;
}

.container h4{
    margin: 0;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;

}


table{
    width: 100%;
}

img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    width: 100px;
    height: 100px;
    
}

解决方案：别用表格，Flexbox/Grid是更优选择 #

第一步：先修复PHP代码的基础问题 #

1. CSS链接移出循环：你现在每循环一条数据就输出一次CSS链接，会导致页面重复加载相同样式，把这些<link>标签放到循环外面，最好直接放到页面的<head>标签里。
2. 修正HTML语法错误：<img>标签未闭合，<h4>和<b>的闭合顺序颠倒，已经在下面的代码里修正。
3. 统一卡片容器：现在每个卡片单独套了.cards-container，应该用一个大容器包裹所有卡片，这样才能实现整体的列状排列。

修改后的PHP代码：

<?php 
    include '../DBConnector.php';

    $menuQuery = "SELECT * FROM menu";
    $menuResult = $conn->query($menuQuery);

    // CSS链接建议直接放到页面<head>中，这里先移到循环外
    echo "<link rel='stylesheet' href='../css/cards.css'> ";
    echo "<link rel='stylesheet' href='../css/style.css'>";
    echo "<link rel='stylesheet' href='../css/buttons.css'>";

    if ($menuResult->num_rows > 0) {
        // 外层大容器包裹所有卡片
        echo "<div class='cards-container'>";
        while ($row = $menuResult->fetch_assoc()) {
            echo "<div class='cards'>";
                echo "<img class='center' src='" . $row['food_image'] . "' alt='" .$row['food_name'] . "'>";
                echo "<div class='container'>";
                    echo "<h4><b>" . $row['food_name'] . "</b></h4>";
                    echo "<form action='food-view.php' method='post'> 
                        <button type='submit'> Order </button>
                    </form>"; 
                echo "</div>";                    
            echo "</div>";
        }
        echo "</div>";
    }
?>

第二步：用Flexbox修改CSS实现列状布局 #

修改.cards-container和.cards的样式，利用Flexbox实现灵活的列状排列：

.cards-container{
    position: relative;
    top: 25px;
    /* 开启Flex布局 */
    display: flex;
    /* 卡片超出容器自动换行 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    gap: 20px;
    /* 容器内边距，避免卡片贴边 */
    padding: 0 20px;
    /* 水平方向均匀分布卡片 */
    justify-content: center;
}

.cards {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 300px;
    border-radius: 5px;
    text-align: center;
    /* 让卡片高度一致，即使内容长度不同 */
    display: flex;
    flex-direction: column;
}

.cards:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
    /* 去掉float: left，避免布局混乱 */
    /* float: left; */
    /* 让容器占满卡片剩余空间，按钮自动靠下 */
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.container h4{
    margin: 10px 0;
}

.center{
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* 让图片占满卡片宽度 */
    width: 100%;
    height: 200px;
}

img {
    border-radius: 5px 5px 0 0;
    object-fit: cover;
    /* 继承.center的宽高 */
    width: inherit;
    height: inherit;
}

为什么不用表格？ #

表格是为结构化数据展示设计的（比如类似Excel的行列对应数据），不是用来做页面布局的。用Flexbox或Grid做卡片布局更灵活，响应式适配更好，能自动适配不同屏幕尺寸，代码也更简洁易维护。

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