Question

我在这里遇到的问题与子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>

这个CSS：

.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%;
}

如何让类gallery_img_container 的所有div浮动到彼此的左边？我尝试添加float:left .gallery_img_container ，但它没有做任何事情。它们彼此相对而不是并排。

另一个注意事项是 .gallery_img_container 必须具有display:flex属性

提前感谢您的帮助！

编辑： .gallery_img_container 必须具有width:100%属性

Answer 1

根据评论进行编辑。

＆＃13;

.gallery_container {
  width: 70%;
  height: 100%;
  background-color: #171717;
}
#viewport {
  height: 100%;
  width: 100%;
  display: flex;
}
.gallery_img_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.gallery_img {
  height: 95%;
}

＆＃13;

<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>

＆＃13;

Answer 2

你有＆＃34;宽度：100％;＆＃34;适用于＆＃34; .gallery_img_container＆＃34; class导致每个容器进入下一行，删除它并添加＆＃34; float：left;＆＃34;那就行了。

Answer 3

Farasat，

我不完全确定你想要完成什么。让我看看我是否可以确认我认为你在寻求什么。你想要获得一个结果，你有一组图像，这些图像总体上比#viewport宽，但是你希望它们保持“堆积”到右边。也就是说，你不希望它们换行。如果我们认为[]视口的边界和@是一个图像，你想要（例如），像这样：

[@] @@

这是对的吗？

如果是这样，我认为需要注意的一件事是你的gallery_img_container是display flex，这意味着它是一个块，而不是内联样式。这将导致gallery_img_containers堆叠，而不是向右流动。

我认为你需要做的就是说“white-space：nowrap;”在#viewport中（以防止包装），然后使gallery_img_container为inline-flex类型，以便它们不会堆叠。

我附上一个例子，希望能够证明我的意思（注意：我只是从网上抓取一张随机图片，使其更加具体。另请注意，由于您的gallery_img_container为100％，因此每张图片的大小均为#viewport。我不确定这是不是你想要的。

.gallery_container {
    width: 70%;
    height: 100%;
    background-color: #171717;
}

#viewport {
    height: 100%;
    width: 100%;
    white-space: nowrap;
}

.gallery_img_container {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.gallery_img {
    height: 95%;
}

<div class="gallery_container">
    <div id="viewport">
        <div class="gallery_img_container">
            <img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
        </div>
        <div class="gallery_img_container">
            <img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
        </div>
        <div class="gallery_img_container">
            <img src="https://wildfiregames.com/forum/uploads/monthly_2016_07/elephant.png.d12017f872cf14f8b046706f497701ba.png" class="gallery_img">
        </div>
    </div>
</div>

float：即使父div太小也要离开

3 个答案: