如何用CSS实现流体宽度div与受限文本div并排且保持固定间距

使用Flex布局即可完美实现该需求，无需使用绝对定位，具体代码如下：

基础结构代码 #

HTML #

<div class="layout-container">
  <!-- 流体宽度图片容器 -->
  <div class="fluid-img-wrap">
    <img src="替换为你的图片地址" alt="内容图片">
  </div>
  <!-- 受限宽度文本容器 -->
  <div class="fixed-text-wrap">
    此处为受限宽度的文本内容，宽度不会随父容器随意拉伸
  </div>
</div>

CSS #

.layout-container {
  display: flex;
  /* 固定间距，可根据需求调整数值 */
  gap: 24px;
  width: 100%;
  box-sizing: border-box;
  /* 可选：让两个容器垂直居中对齐 */
  align-items: center;
}

.fluid-img-wrap {
  /* 自动占满剩余可用宽度，实现流体自适应 */
  flex: 1;
  min-width: 0; /* 避免图片过大撑破容器 */
}

.fluid-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

.fixed-text-wrap {
  /* 文本容器受限宽度，可根据需求调整 */
  max-width: 420px;
  /* 如果需要文本容器宽度完全固定，替换为width: 420px即可 */
  flex-shrink: 0; /* 禁止容器被压缩 */
}

实现逻辑 #

• 父容器的gap属性设置固定像素间距，无论整体容器宽度如何变化，两个子元素的间距始终保持恒定
• 流体图片容器设置flex: 1，会自动扣除固定间距和文本容器宽度后，占满所有剩余空间，实现自适应效果
• 文本容器设置flex-shrink: 0，避免父容器宽度较小时文本容器被压缩，始终维持设定的宽度阈值

兼容方案 #

如果需要兼容不支持gap属性的老旧浏览器，可删除gap属性，改为给文本容器设置margin-left: 24px，效果完全一致。

响应式适配（可选） #

如果需要在小屏幕下让两个容器堆叠显示，可添加媒体查询：

@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .fixed-text-wrap {
    max-width: 100%;
    margin-left: 0;
  }
}

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