Question

它将卡片显示为一列，而不是中号显示三张。

我已经尝试了HTML的基本布局，并且效果很好。

echo '<div class="row>';

        if($res->num_rows > 0){
            while($row = $res->fetch_assoc()){
                echo  '<div class="col s12 m4">' .
                        '<div class="card">' .
                          '<div class="card-content">' .
                            '<span class="card-title">' . $row["Kanji"]             .   '</span>' .
                            $row["Onyomi"]. '   ' . $row["Kunyomi"] .
                          '</div>' . 
                          '<div class="card-action">' .'<p>' . $row["English"] . '</p>' . '</div>' . 
                        '</div>'.
                      '</div>';
            }
        }
        echo '</div>';

Answer 1

我做到了。

这是起作用的。

<div class="row">  
      <?php if($res->num_rows > 0){
            while($row = $res->fetch_assoc()){
      ?>

        <div class="col s12 m4">
          <div class="card">
            <div class="card-content">
              <span class="card-title"><?php echo $row["Kanji"] ?></span>
              <p><?php echo $row["Onyomi"]; echo $row["Kunyomi"] ?></p>
            </div>

            <div class="card-action">
              <?php echo $row["English"] ?>
            </div>
          </div>
        </div>  

      <?php } } ?>

Answer 2

您可以检查实体化网格https://materializecss.com/grid.html

使用物化网格，您可以放置必要的列。

连续3列的一个示例

<div class="row">
  <div class="col s4">Column 1</div>
  <div class="col s4">Column 2</div>
  <div class="col s4">Column 3</div>
</div>

Answer 3

您忘记了行类末尾的引号：class =“ row>

如何在实现中使用卡片以每行3列显示

3 个答案: