php - 我怎样才能制作一个水平滚动的div，里面有div？

Question

我创建了一个包含 div 的 div。 div 中的这些 div 是图像和一些文本。我希望主 div 可以水平滚动。其中的 div 使用内联 block 对齐。

当我使用

overflow-x: scroll;

div 有 2 个滚动条，但只有垂直滚动条有效。 当我放入的 div 多于主 div 的宽度时，这些 div 会放在下面的行中。我希望将它们放在其他 div 旁边，当它们离开页面时，您可以滚动找到它们。 我该怎么做才能做到这一点？

div 代码(我使用数据库输入 div，这有效):

echo '<div id="indiv">';
            foreach ($result as $pers) {
                $time = date('H:i', strtotime( $pers->tijd ) );
                echo "<div id='imgnaam'>";
                echo "<img id='bigimageind' src=".$pers->img.">";
                echo "<hr>";
                echo "<p id='imgnaam2'>".$time."</p>";
                echo "</div>";
            }    
            echo '</div>';

还有 CSS:

#imgnaam2 {
height: 50px;
width: 200px;
text-align: center;
    margin: 0;
    font-size: 20px;
    background-color: rgba(155, 82, 197, 0.425);
}

#bigimage {
    height: relative;
    width: 20%;
    display: inline-block; 
}

#indiv {
    background-color: rgba(128, 0, 128, 0.432);
    border: 35px solid rgba(255, 255, 255, 0.459);
    overflow-x: scroll;
}

Answer 1

试试这个:

#indiv{
 width: max-content !important;
}

或者这个:

#indiv{
 width: 100%;
 display: flex;
 flex-flow: row;
 flex-wrap: nowrap;
 overflow: scroll;
}