html - css 每行显示 3 列

Question

我正在学习用 php 编程，我是否在每行显示 3 列时遇到问题。

现在的输出:

 <?php

    $query = "SELECT * FROM DOCUMENTOS where EDUCATIVOS=1";
    $result = mysqli_query($conn,$query);

    while($row=mysqli_fetch_array($result)) {
      ?>
            <div class="row">
                <div class="col-sm-4 img-portfolio">
                    <a href="<?=$row['LINK_DOCUMENTOS'] ?>"">
                        <img class="img-responsive img-hover" src="<?=$row['LINK_IMAGEM'] ?>" alt=""> </a>
                        <h3><?=$row['NOME'] ?></h3>
                        <p><?=$row['DESCRICAO'] ?></p>

               </div>

        <?php   
        }
    ?>


   </div>

Answer 1

你必须在这里做一点数学运算。使用像 $counter 这样的计数器变量来跟踪每行中打印了多少列，并将每三列 divs 封装为一行 div。所以你的代码应该是这样的:

<?php
$query = "SELECT * FROM DOCUMENTOS where EDUCATIVOS=1";
$result = mysqli_query($conn,$query);

if(mysqli_num_rows($result)){
    $counter = 0;
    echo '<div class="row">';
    while($row=mysqli_fetch_array($result)) {
        if($counter != 0 && $counter % 3 == 0){
            echo '</div><div class="row">';
        }
    ?>
        <div class="col-sm-4 img-portfolio">
            <a href="<?=$row['LINK_DOCUMENTOS'] ?>"">
            <img class="img-responsive img-hover" src="<?=$row['LINK_IMAGEM'] ?>" alt=""> </a>
            <h3><?=$row['NOME'] ?></h3>
            <p><?=$row['DESCRICAO'] ?></p>
       </div>

    <?php   
        ++$counter;
    }
    echo '</div>';
}
?>