如何规避浮动：左；砌体布局中的行为

Question

这是我正在处理的页面： https://1stamender.com/testing-elements.php

这基本上是我网站上最新文章的列表，现在我有一个我希望改进的 UI。现在我已经使用引导程序和我自己的 CSS 定义了它，但似乎找不到解决方案。 基本上我可以看到由于 div 处理 float:left; 的固有方式，存在一些时髦的间距。

它将 div 推入一个新行，而不是尝试将自己推到它上面的 div 上，留下一些尴尬的间距。这可以通过设置高度来解决，但每篇文章的高度通常会有所不同。

我完全不知道如何明智地使用 CSS，我一直在谷歌搜索......

编辑：抱歉，我知道您想查看代码本身：

echo '  
                <div class="articlecontainer">
                    <div class="articlepicture2">
                        <a href="article.php?articlenumber='.$articlenumber.'"><img src="'.$mainpic.'" alt="'.$headline.'" width="100%"></a>
                    </div>
                    <div class="articledescription2">
                        <a href="article.php?articlenumber='.$articlenumber.'" class="articlelink2"><strong><span class="headlinearticle2">'.$headline.'</span></strong><br>
                        '.substr($content,0,100).'...</a>
                        <hr>
                        Written by: ';
                        $sqlauthor = "SELECT * FROM ACCOUNT WHERE USERNAME='$articleauthor'";
                        $resultauthor = $conn->query($sqlauthor);
                        if ($resultauthor->num_rows > 0) {
                                // output data of each row
                                $rowauthor = $resultauthor->fetch_assoc();
                                $authordisplayname = $rowauthor['DISPLAYNAME'];
                                echo '<i>'.$authordisplayname.'</i><br>';
                                echo 'Overall Rating: ';
                                echo '<img src="images/main/rating/'.$star.'.png" alt="Rating 0.5" width="80">';
                        }

                        echo '
                    </div>
                </div>

            ';

CSS：

.articlecontainer{
background-color: #666;
border: solid 1px #000;
color: #fff;
padding: 0px !important;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom:10px !important;
border-radius: 5px;
width: 25%;
float: left;

Answer 1

您可以为每列使用三个变量并始终切换使用的变量，或者您可以使用 css-columns，但您可以将帖子顺序更改为从上到下。

CSS 列：https://developer.mozilla.org/en-US/docs/Web/CSS/columns
PHP：像这样的：

$column = 1;
$column_1_html = "";
$column_2_html = "";
$column_3_html = "";
foreach($boxes => $box) {
    $box_html = "...";
    if($column == 1) {
        $column = 2;
        $column_1_html .= $box_html;
    } else if($column == 2) {
        $column = 3;
        $column_2_html .= $box_html;
    } else if($column == 3) {
        $column = 1;
        $column_3_html .= $box_html;
    }
}

如 cmets 中所述，此库可能适合您：https://masonry.desandro.com/layout.html