当卡片存储从mysql数据库中获取的数据时,如何将这些卡片连续排列

时间:2018-12-05 19:36:20

标签: php html css mysql materialize

我正在尝试从数据库中获取数据到Materialise CSS卡中。我想要的是连续三张卡。在一列第三张卡之后,它将自动在下一个新行中显示下三张卡。

Here is the snapshot of how it is getting displayed now. And this is how I want to display it 这是我的快照代码。

<?php
        $cnt=1;
        $sql=mysqli_query($db,"select * from addevent");
        $row=mysqli_num_rows($sql);

        while($row=mysqli_fetch_array($sql)){
                echo"<div class='card amber lighten-1' style='grid-auto-flow:row; width:300px;margin-left:10px;'>
                                <div class='card-content'>";
                                    echo "<span class='card-title activator teal-text text-darken-3'>".$row['EventName']."<i class='material-icons right'>more_vert</i></span>";
                                    echo "<h6 class='teal-text text-darken-3'>".$row['Oname']."</h6>";
                                    echo "<h5 class='brown-text text-lighten-3'>".$row['EventDate']." | ".$row['EventTime']."</h5>";
                                    echo "<p class='deep-orange-text text-lighten-1'>".$row['EventAddress']."</p>";
                                echo"</div>";

                                echo"<div class='card-reveal'>";
                                    echo "<span class='card-title orange-text text-lighten-1'>".$row['EventName']."<i class='material-icons right'>close</i></span>";
                                    echo "<p class='teal-text text-lighten-2'>".$row['AboutEvent']."</p>";
                                echo"</div>";
                        echo"</div>";

            }
            echo"</div>";
    ?>

1 个答案:

答案 0 :(得分:0)

只要在每次迭代中运行一个计数器即可。 一旦计数器达到3,您只需关闭当前行并打开一个新行。 之后不要忘记将计数器重置为1。