javascript - 如果已达到最大高度，则渲染多个内联元素

Question

我正在使用 PHP 动态呈现多个 div 元素。这些 div 元素在具有 max-height: 300px; 的容器 div 中呈现，这个容器 div 具有 width: 500px;，以及我在其中呈现的 div 元素它有 width: 10px;。

目前，所有 div 都在彼此下方呈现，当它们达到 300px 的最大高度时，它们会呈现在容器 div 元素之外。相反，当第一列填充容器 div 时，这些元素应该在容器 div 的顶部开始一个新列。

Answer 1

使用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>

然后在你的 CSS 中

.image-column {
    display: inline-block;
}