如何制作带有 div 的水平滚动 div？答案

【问题标题】：How can I make a horizontally scrollable div with divs in it?如何制作带有 div 的水平滚动 div？
【发布时间】：2019-02-26 09:34:35
【问题描述】：

我创建了一个包含 div 的 div。 div 中的这些 div 是图像和一些文本。我希望主 div 可以水平滚动。其中的 div 使用 inline-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;
}

【问题讨论】：

标签： php html css scroll

【解决方案1】：

试试这个：

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

或者这个：

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

【讨论】：

@Man8zzzzzzzzzDWOMAN 欢迎您。你也可以标记答案。谢谢:)

【解决方案2】：

使用溢出

.container {
    width: 30em;
    overflow-x: auto;
    white-space: nowrap;
}

Example

【讨论】：