Javascript 如果已达到最大高度，则在线渲染多个元素

我正在使用

PHP

动态呈现多个

div

元素。这些div元素在容器div中渲染，容器div具有

max height:300px此容器div具有
宽度：500px，我在其中渲染的div元素的宽度为10px

当前，所有div都在彼此下方渲染，当它们达到最大高度
300px
时，它们在容器div元素外部渲染。相反，当第一列填充容器div时，这些元素应该在容器div的顶部开始一个新列。
使用PHP为每个列生成一个单独的容器div，并将CSS规则
display:inline block
添加到容器中

<div class="container">

<?php

    $image_directory = '/path/to/your/images/';

    $images = array(
        $image_directory . 'image_1.jpg',
        $image_directory . 'image_2.jpg',
        $image_directory . 'image_3.jpg',
        # and so on...
    );

    $count = 1;

    foreach( $images as $image ) {

        if( $count == 1 ) {    
            echo '<div class="image-column">';
        }

        echo '<img src="' . $image . '">';

        if( $count == 5 ) {    
            echo '</div>';
            $count = 1;
        }

        $count++;
    }
?>

</div>

请包含一些您遇到问题的特定HTML代码。提供相对和模糊的价值观示例是没有帮助的。“我希望有人能理解我，如果没有，我会发布一张关于这种情况的图片。”不要只发布图片，也要发布代码……他们是否必须在进入下一个专栏之前从上到下进行排序？或者它能走1-2，然后3-4，然后5-6，等等？这不是我想要的工作；我制作了一个图像来显示你想要的我想要的，就像我在这张图像6中看到的那样，因为5下面没有更多的空间：@user3041757你必须用PHP生成列。我已经编辑了我的答案，以显示您可能会如何做这件事。当然，你必须事先知道图像是什么。
.image-column {
    display: inline-block;
}