Html float：即使父div太小也会向左

我在这里面临的问题是，子div的总宽度大于父div的宽度。我需要子div彼此向左浮动，即使它们溢出父div

我有这个HTML：

<div class="gallery_container">
    <div id="viewport">
        <div class="gallery_img_container">
            <img src="images/1/1.png" class="gallery_img">
        </div>
        <div class="gallery_img_container">
            <img src="images/1/2.png" class="gallery_img">
        </div>
        <div class="gallery_img_container">
            <img src="images/1/3.png" class="gallery_img">
        </div>
    </div>
</div>

我如何才能使所有带有of类库\u img\u容器的div浮动到彼此的左侧？我尝试添加

float:left

。gallery\u img\u container，但它没有任何作用。它们在彼此下面而不是并排前进

另一个注意事项是.gallery\u img\u container必须具有

display:flex

属性

提前感谢您的帮助

---

编辑：。gallery\u img\u容器必须具有根据注释编辑的

宽度：100%

属性

.gallery\u容器{
宽度：70%；
身高：100%；
背景色：#171717；
}
#视区{
身高：100%；
宽度：100%；
显示器：flex；
}
.gallery\u img\u容器{
宽度：100%；
身高：100%；
显示器：flex；
弯曲方向：行；
调整内容：灵活启动；
柔性包装：包装；
}
.画廊{
身高：95%；
}

您将“宽度：100%”应用于“.gallery\u img\u container”类，使每个容器进入下一行，删除此项并添加“float:left；”，然后它就会工作。

Farasat

我不完全确定你想要完成什么。让我看看我是否能证实我认为你在寻找什么。您希望得到一个结果，即您拥有一组总体上比#视口更宽的图像，但您希望它们保持向右“堆积”。也就是说，你不想让它们包起来。如果我们考虑[V]端口的视界和@是一个图像，你想要（例如），像这样的：

[@]@@

是这样吗

如果是这样，我认为需要注意的一点是，您的gallery\u img\u容器是display flex，这意味着它是一种块样式，而不是内联样式。这将导致gallery_img_容器堆叠，而不是流向右侧

我认为你所需要做的就是在视口中说“空白：nowrap；”（防止东西被包装），然后让gallery_img_容器成为inline flex类型，这样它们就不会堆叠

我附上一个例子，希望能说明我的意思（注：我只是从网上抓取了一张随机图像，使其更具体。还要注意，由于您的gallery_img_容器是100%，每个图像都是#视口的大小。我不确定这是否是您想要的）

.gallery\u容器{
宽度：70%；
身高：100%；
背景色：#171717；
}
#视区{
身高：100%；
宽度：100%；
空白：nowrap；
}
.gallery\u img\u容器{
宽度：100%；
身高：100%；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
}
.画廊{
身高：95%；
}

这就是问题所在。子对象的总宽度大于父对象的总宽度。有没有办法让它们继续向左浮动？我已经更新了问题以使其更清晰。lol编辑完全更改了问题，保留“宽度：100%；”以试图解决您的问题没有意义。100%的宽度就是完全横跨行，除非您将其定位为绝对宽度@法拉萨特，这些答案有没有回答你的问题？

.gallery_container {
    width: 70%;
    height: 100%;
    float: left;
    background-color: #171717;
}

#viewport {
    height: 100%;
    width: 100%;
}

.gallery_img_container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.gallery_img {
    height: 95%;
}