强制在没有"white-space:nowrap"的div上使用float:left

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 中的 imgs，这是最初的意图。 “white-space:nowrap”做了它应该做的事情，所以这个技巧似乎只在人们不关心将内容包装在 div 内时才起作用。但在这种情况下我确实这么做了。

所以，总而言之，如果我保留空白属性，我的 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”。

无需使用块显示、删除浮动、调整内容或包装/展开任何内容。

仅当浮动 div 应保持各自的高度时才需要“align-items: flex-start”，否则它们将采用最高 div 的高度。这不是问题，除非您为浮动 div 使用与容器不同的背景颜色。

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

谢谢。