如何正确地在php文件中对来自mysql的数据进行样式化？

Question

我正在开发一个使用 php 和 mysql 的项目。

我当前正在显示表格中的数据，但我想对其进行样式化。我这样做有困难。

在下面的代码中，在最后；测试部分正在显示我想要的方式。但在显示数据的部分，所有内容都在同一列上。但我想要一个与零件测试类似的结果，由于 Flexbox，列正在根据屏幕的大小调整一行上的数量。

我猜这是因为我一会儿想将它风格化。

但我不知道该怎么做……有人有什么想法吗？

//Part display data
while ($rows = $result-> fetch_assoc()) {
    ?>
    <div class="containerAdmin" style="display:flex; flex-wrap:wrap">
        <div class="box4test">
            <p>test</p>
            <h3><?php echo $rows['nom'];?></h3>
            <?php echo " | category: ";?>
            <?php echo $rows['category'];?>
            <button> x </button>
        </div>
    </div>
    <?php
}
?>
<!-- Part test for the display-->
<div class="containerAdmin" style="display:flex; flex-wrap:wrap">
    <div class="box4test">
        <p>1 </p>            
    </div>
    <div class="box4test">
        <p>2 </p>            
    </div>
    <div class="box4test">
        <p>3 </p>            
    </div>
    <div class="box4test">
        <p>4</p>            
    </div>
</div>

这是 box4test 类的代码，位于 un .css 文件中：

/*.containerAdmin{
    display: flex;
    flex-wrap: wrap;
}*/
.box4test {
    background-color: plum;
    margin: 10px;
    width: 300px;
    height: 50%;
}

Answer 1

您只需将循环添加到containerAdmin div 中即可。请检查下面的代码。

<div class="containerAdmin" style="display:flex; flex-wrap:wrap">
<?php while ($rows = $result-> fetch_assoc()) { ?>
    <div class="box4test">
        <p>test</p>
        <h3><?php echo $rows['nom'];?></h3>
        <?php echo " | categorie: ";?>
        <?php echo $rows['categorie'];?>
        <button> x </button>
    </div>
<?php } ?>
</div>