列 div 移动到上方最大高度的列 div 下方

Question

我正在使用 PHP 循环从 MySQL 数据库创建和显示文章（作为“col”div）。如果我使用 3 个“col-6”div，则第 3 个将移动到上述两个 div 下方。我希望它靠近它上面的 div（在这种情况下是第一个 col-6 div）。我怎样才能做到这一点？

我发现这是引导列的问题。另外，在这种情况下我不能使用绝对定位。

while($row=mysqli_fetch_array($run_query)){

    echo '<div class="col-md-6 col-xl-4 blogColumn">';

        echo '<a class="articleLink" href="show.php?blogId=';echo $row['id'].'" target="_blank">';

            echo '<article>';

                echo '<header>';

                    if($row['file_id']==null){

                        echo '<img class="img-fluid rounded focus" src="https://i.ibb.co/ZNDm012/logo.jpg"/>';

                    } else{

                        $fileId=$row['file_id'];

                        $q="SELECT * FROM uploads WHERE id='$fileId'";

                        $run_q=mysqli_query($con,$q) or die(mysqli_error($con));   

                        $res=mysqli_fetch_array($run_q);

                        $path="uploads/".$res['name'];

                        if($res['type']=='image'){     

                            echo '<img class="img-fluid rounded focus" src="'.$path.'"/>';

                        } else {

                            echo '<video class="articleVideo" src="'.$path.'" controls="controls">';

                            echo '</video>';

                        } }

                    echo '<h2>'.$row['title'].'</h2>';

                echo '</header>';

                echo '<p>'.substr($row['description'],0,100).'... Read More'.'</p>';

            echo '</article>';

        echo '</a>';

        echo '<hr/>';

    echo '</div>';}?>```

Answer 1

页面的全宽由 col-12 定义。所以如果你想有 3 个相同宽度的列彼此相邻使用 col-md-4<div class="col-md-4">...</div><div class="col-md-4">...</div><div class="col-md-4">...</div>这将导致 3 个等宽的列彼此相邻。