Question

我创建了一个包含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;
}

Answer 1

尝试一下：

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

或者这个：

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

Answer 2

使用溢出

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

Example

如何在其中包含div的水平滚动div？

2 个答案: