浮動：左即使父格太小

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

編輯基於評論。

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

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

Answer 2

你必須 「寬度：100％;」應用於「.gallery_img_container」類，導致每個容器分成下一行，刪除並添加「float：left;」那麼它會工作。

Answer 3

Farasat，

我不能完全確定你要完成的任務。讓我看看我能否證實我認爲你正在尋找的東西。你想，你有一組圖片，其是統稱，比#viewport寬達到的結果，但希望他們保持「堆砌」向右。也就是說，你不想讓他們包裝。如果我們考慮[]視域和@的界限是一個形象，你想要的（例如），這樣的事情：

[@] @@

這是正確的？

如果是這樣，我覺得要注意的一個關鍵問題是，你的gallery_img_container是顯示器撓性，這意味着它是一個塊，而不是內聯，風格。這將導致gallery_img_containers堆疊，而不是流向右側。

我認爲，所有你需要做的就是「白色空間：NOWRAP;」在#viewport（保持從包裝的東西），然後使gallery_img_container是內嵌式柔性的，這樣它們就不會疊加。 （注意：我只是從網上抓取了一張隨機圖片，以使其更加具體，另外請注意，由於您的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>