在沒有“white-space:nowrap”的div上強制浮動：左

Question

有這樣的事情：

<div class="container">

    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>
      
    </div>
    
    <div class="floating">
      
      <img src="image" alt="">
      
      <p>
          text...
      </p>

    </div>
    
</div>

我希望“浮動”div 漂浮在彼此的左側，即使它們溢出了容器。

我嘗試在浮動 div 上使用“float:left”，但它不起作用。 它們相互堆疊。

因此，我找到了一種解決方法，在浮動元素上使用“display:inline-block”，在容器上使用“white-space:nowrap”，它可以工作，但對我來說沒有幫助。

.container{
    width:600px; 
    border:2px solid black;
    overflow:hidden;
    display:block;
    white-space:nowrap; /* delete this and see the actual floating divs layout*/
}

.floating{
    width:66%;
    display: inline-block;
}

img{
  width:120px; 
  height:120px;
  float:left;
}

事實上，“white-space:nowrap”阻止我的文本環繞浮動 div 中的 img，這是最初的意圖。 “white-space:nowrap”做了它應該做的事情，所以這個技巧似乎只在不關心將內容包裝在 div 中時才起作用。 但在這種情況下我會這樣做。

所以，總而言之，如果我保留 white-space 屬性，我的 2 個 div 將按它們應有的方式浮動，但其中的內容會被弄亂。 如果我不使用該屬性，則 div 中的內容會保留，但 div 不會浮動。

https://jsfiddle.net/8n0um9kz/

有什么解決方案能讓我得到我想要的嗎？

謝謝。

PS：我在示例中為兩個浮動 div 使用了 66% 的寬度，以便您可以同時看到兩者以進行說明。 就我而言，它們當然都是 100%。

Answer 1

是的。 你有一個解決方案。

您可以在容器上使用“display: flex”和“ flex-wrap: wrap” ，而不是在容器上使用“white-space: no-wrap”，以允許項目在容器末尾時進入下一行。 進一步使用' justify-content: flex -start'

Answer 2

我是這樣理解的。

.container{
    width:600px; 
    display:flex;  //required
    align-items: flex-start; //optional
    overflow:hidden;
}

.floating{
    min-width: 66%; //required
}

img{
  width:120px; 
  height:120px;
  float:left;
}

關鍵方面是在容器上使用“min-width”而不是“width”和“display:flex”。

無需使用塊顯示、刪除浮動、調整內容或包裝/解包任何東西。

'align-items: flex-start' 僅在浮動 div 應保持各自的高度時才需要，否則它們將采用最高 div 的高度。 這不是問題，除非您將背景 colors 用於與容器不同的浮動 div。

https://jsfiddle.net/b83rzL07/1/

謝謝。