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

Question

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

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

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 个等宽的列彼此相邻。

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

Column div moving below the column div with largest height above

html

php

col

bootstrap-4