有这样的东西：
<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/
谢谢。