如何在不使用white-space:nowrap时实现div左浮并排且内部排版正常？

问题描述 #

现有HTML结构：

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

核心需求：

• 带有floating类的div要左浮并排，哪怕总宽度超过容器范围
• div内的文本必须能正常环绕图片

之前尝试的方法都存在矛盾：

• 直接给floating加float:left：div会堆叠，无法实现并排
• 用display:inline-block+容器white-space:nowrap：div能并排，但内部文本无法环绕图片；删掉white-space:nowrap，内部排版恢复正常，但div又没法并排了

当前使用的CSS：

.container{
    width:600px; 
    border:2px solid black;
    overflow:hidden;
    display:block;
    white-space:nowrap; /* 删除此属性可查看div实际布局*/
}

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

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

注：示例里floating设为66%是为了能同时显示两个div，实际场景中它们的宽度都是100%。

可行解决方案 #

使用CSS Flexbox可以同时满足两个需求，修改后的CSS代码如下：

.container{
    width:600px; 
    border:2px solid black;
    /* 可选：如需横向滚动查看溢出内容，把overflow:hidden改成overflow-x:auto */
    overflow: hidden; 
    display: flex; 
    flex-wrap: nowrap; /* 强制元素不换行，并排显示 */
}

.floating{
    width: 100%; /* 实际场景的宽度 */
    flex-shrink: 0; /* 防止元素被容器压缩 */
    /* 可选：添加元素间距，比如margin-right: 15px; */
}

img{
  width:120px; 
  height:120px;
  float:left;
  margin-right: 8px; /* 可选：增加图片和文本的间距 */
}

原理说明 #

• display:flex让容器成为flex容器，子元素自动转为flex项目
• flex-wrap:nowrap强制所有flex项目在同一行排列，即使总宽度超出容器范围，实现并排溢出的效果
• flex-shrink:0保证floating元素不会被容器压缩，维持设定的宽度
• 内部图片的float:left不受flex布局影响，文本依然能正常环绕图片

内容的提问来源于stack exchange，提问作者Bachir Messaouri