HTML+CSS实现动态三栏布局：侧边栏等宽且最大化，中间栏宽度自适应内容并主导布局

我完全懂你为啥觉得这个需求有点棘手——平时常见的三栏布局要么是固定宽度，要么是中间自适应，这种由中间内容主导宽度、左右侧边栏等宽填充剩余空间的场景确实不算常规操作，但好在现代CSS的Flexbox和Grid模块都能完美解决，而且完全符合你要求的三个连续DOM元素结构！

方案一：Flexbox 实现（兼容性更广） #

这是兼容性最好的方案，几乎支持所有现代浏览器，甚至包括一些旧版本的浏览器。

HTML 结构 #

<div class="layout-container">
  <div class="left">左侧任意内容</div>
  <div class="middle">or</div>
  <div class="right">右侧任意内容</div>
</div>

CSS 代码 #

/* 核心布局容器 */
.layout-container {
  display: flex;
  width: 100%; /* 占满父容器的可用宽度 */
}

/* 左右侧边栏：平分剩余空间 */
.left, .right {
  flex: 1; 
  /* flex:1 等价于 flex-grow:1, flex-shrink:1, flex-basis:0%
     意味着两个元素会平分容器中除中间栏外的所有剩余空间 */
  background: #f5f5f5; /* 可选：加背景色方便查看效果 */
}

/* 中间栏：宽度由内容决定 */
.middle {
  flex-shrink: 0; /* 禁止中间栏被压缩，确保宽度完全匹配内容 */
  margin: 0 1rem; /* 可选：给中间栏加左右间距，提升视觉体验 */
  background: #e8e8e8; /* 可选：加背景色方便查看效果 */
}

/* 移动端响应式切换：垂直堆叠 */
@media (max-width: 768px) {
  .layout-container {
    flex-direction: column;
  }
  .left, .middle, .right {
    width: 100%;
    margin: 0.5rem 0; /* 可选：垂直堆叠时加上下间距 */
  }
}

方案二：CSS Grid 实现（代码更直观） #

Grid布局是专门为二维布局设计的，实现这个需求的代码会更简洁直观，适合现代浏览器环境。

HTML 结构 #

和Flexbox方案完全一致，不需要修改DOM结构：

<div class="layout-container">
  <div class="left">左侧任意内容</div>
  <div class="middle">and</div>
  <div class="right">右侧任意内容</div>
</div>

CSS 代码 #

/* 核心布局容器 */
.layout-container {
  display: grid;
  /* 关键：左右各占1份剩余空间，中间由内容自动决定宽度 */
  grid-template-columns: 1fr auto 1fr;
  width: 100%;
  gap: 1rem; /* 可选：列之间的间距，替代margin更简洁 */
}

.left, .right {
  background: #f5f5f5; /* 可选：加背景色方便查看效果 */
}

.middle {
  background: #e8e8e8; /* 可选：加背景色方便查看效果 */
}

/* 移动端响应式切换：垂直堆叠 */
@media (max-width: 768px) {
  .layout-container {
    grid-template-columns: 1fr; /* 切换为单列布局 */
    gap: 0.5rem; /* 调整垂直间距 */
  }
}

额外注意事项 #

• 如果希望中间栏始终保持单行内容的最小宽度，可以给.middle添加white-space: nowrap属性，防止内容换行导致宽度变化。
• 两种方案都完全符合你的需求：中间栏宽度由内容主导，左右侧边栏等宽填充剩余空间，且都是无固定宽度的动态布局。
• 响应式切换非常简单，只需要修改Flex的方向或者Grid的列定义，不需要调整DOM结构。

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