有這樣的東西：
<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 中的 imgs，這是最初的意圖。 「white-space:nowrap」做了它應該做的事情，所以這個技巧似乎只在人們不關心將內容包裝在 div 內時才起作用。但在這種情況下我確實這麼做了。
所以，總而言之，如果我保留空白屬性，我的 2 個 div 會以應有的方式浮動，但其中的內容會變得混亂。如果我不使用該屬性，則 div 內的內容將被保留，但 div 不會浮動。
https://jsfiddle.net/8n0um9kz/
有什麼解決方案可以讓我得到我想要的嗎？
謝謝。
PS：我在範例中為兩個浮動 div 使用了 66% 的寬度，以便您可以同時看到兩者以進行說明。就我而言，當然它們都是 100%。
是的。你有一個解決方案。
您可以在容器上使用'display : flex'和'flex-wrap :wrap'，而不是在容器上使用'white-space : no-wrap'容器允許項目在到達容器末端時進入下一行。進一步使用 'justify-content : flex -start'
#我是這樣理解的。
.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”。
無需使用區塊顯示、刪除浮動、調整內容或包裝/展開任何內容。
僅當浮動 div 應保持各自的高度時才需要“align-items: flex-start”，否則它們將採用最高 div 的高度。這不是問題，除非您為浮動 div 使用與容器不同的背景顏色。
https://jsfiddle.net/b83rzL07/1/
#謝謝。