如何在浮动div间添加占宽div及实现浏览器缩放时div不换行？

1. 如何添加一个宽度占据多个浮动div之间空间的div #

假设你现在有左右浮动的div，想要在中间放一个div自动填满剩余空间，有两种实用方案：

方法一：利用BFC（块级格式化上下文） #

如果左右div分别设置了左浮动、右浮动，中间的div只需触发BFC就能自动填充间隙。最常用的触发方式是给中间div加overflow: hidden（适合不需要显示溢出内容的场景），或者更安全的display: flow-root（不会裁剪溢出内容）。

代码示例：

<div class="container">
  <div class="left">左浮动区块</div>
  <div class="right">右浮动区块</div>
  <div class="middle">自动填满中间的区块</div>
</div>

.left {
  float: left;
  width: 120px;
  background: #f5f5f5;
}
.right {
  float: right;
  width: 120px;
  background: #f5f5f5;
}
.middle {
  overflow: hidden; /* 触发BFC */
  background: #e8e8e8;
}

方法二：使用Flex布局（现代首选方案） #

直接把父容器改成flex布局，给中间div设置flex: 1，就能让它自动占据所有剩余空间。这种方式比浮动更灵活，也不会有BFC的潜在限制。

代码示例：

<div class="container">
  <div class="left">左侧区块</div>
  <div class="middle">自动填充的中间区块</div>
  <div class="right">右侧区块</div>
</div>

.container {
  display: flex;
}
.left, .right {
  width: 120px;
  background: #f5f5f5;
}
.middle {
  flex: 1; /* 占据剩余全部空间 */
  background: #e8e8e8;
}

2. 如何让div在浏览器窗口缩放时不换行（百分比+最小宽度无效的情况） #

你说的百分比加最小宽度无效，是因为当窗口宽度小于所有div的总宽度时，块级元素默认会触发换行。要解决这个问题，推荐两种可靠方法：

方法一：Flex布局（最推荐） #

把父容器设置为display: flex，同时保持默认的flex-wrap: nowrap（可不写），这样子div会始终在一行排列。如果内容超出窗口，还可以给父容器加overflow-x: auto，让页面出现横向滚动条。

如果不想某个div被压缩，给它加flex-shrink: 0即可；默认flex-shrink: 1会让div自动缩小适配空间。

代码示例：

<div class="container">
  <div class="box">区块1</div>
  <div class="box">区块2</div>
  <div class="box">区块3</div>
</div>

.container {
  display: flex;
  flex-wrap: nowrap; /* 强制不换行 */
  overflow-x: auto; /* 内容溢出时显示横向滚动条 */
}
.box {
  width: 25%;
  min-width: 200px;
  background: #f5f5f5;
  margin: 0 6px;
}

这种方式完全规避了正常流的换行规则，完美解决你遇到的问题。

方法二：inline-block + white-space: nowrap #

把div设置为display: inline-block，给父容器加white-space: nowrap，也能强制不换行。注意inline-block元素之间会有默认间隙，需要通过父容器font-size: 0、子div恢复字体大小来消除。

代码示例：

<div class="container">
  <div class="box">区块1</div>
  <div class="box">区块2</div>
  <div class="box">区块3</div>
</div>

.container {
  white-space: nowrap; /* 强制不换行 */
  overflow-x: auto;
  font-size: 0; /* 消除inline-block间隙 */
}
.box {
  display: inline-block;
  width: 25%;
  min-width: 200px;
  background: #f5f5f5;
  margin: 0 6px;
  font-size: 16px; /* 恢复正常字体大小 */
}

为什么百分比+最小宽度无效？ #

这是CSS正常流的默认规则：当容器宽度不足以容纳所有块级子元素的总宽度时，子元素会自动换行。而上面两种方法都是通过改变布局模型，强制子元素保持在同一行。

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