Question

我正在使用div动态渲染多个PHP元素。这些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;
}

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

1 个答案: