窗口缩放时布局容器尺寸异常变动堆叠，需固定尺寸加横向滚动

嘿，我明白你遇到的问题了——窗口缩放时容器跟着变窄、偏移甚至堆叠，这确实挺烦人的。咱们来一步步把它改成固定尺寸，只显示横向滚动条的布局：

问题根源分析 #

你当前的CSS存在两个核心问题：

• 使用了百分比宽度：窗口缩小的时候容器会跟着按比例收缩，无法保持固定尺寸
• 依赖float: left布局：当容器总宽度超过父容器可用空间时，元素会自动换行堆叠

修改后的完整代码方案 #

首先，给这些容器的父元素（比如专门加一个.wrapper容器，或者直接用<body>）添加样式，然后调整每个容器的CSS：

/* 父容器：用来包裹main、side、card */
.wrapper {
  overflow-x: auto; /* 内容超出时自动显示横向滚动条 */
  white-space: nowrap; /* 强制子元素在同一行排列，禁止换行 */
  min-height: 100vh; /* 保证父容器至少占满视口高度 */
}

/* 主容器 */
.main {
  width: 800px; /* 替换成你需要的固定宽度 */
  display: inline-block; /* 替代float，实现同行排列 */
  vertical-align: top; /* 保证顶部对齐，避免高度不同导致错位 */
}

/* 侧边容器 */
.side {
  background-color: #232323;
  border-left: 4px solid #395d9e;
  width: 200px; /* 固定宽度 */
  padding: 57px 15px;
  height: 100%;
  display: inline-block;
  vertical-align: top;
}

/* 卡片容器 */
.card {
  background-color: #232323;
  padding: 15px; /* 修复了原代码重复设置padding的问题 */
  margin: 80px 0 0 20px;
  width: 850px; /* 固定宽度 */
  border-radius: 4px;
  display: inline-block;
  vertical-align: top;
}

关键改动说明 #

• overflow-x: auto：让父容器在子元素总宽度超过自身时，自动显示横向滚动条
• white-space: nowrap：强制所有inline-block的子元素在同一行排列，彻底避免堆叠
• 替换float: left为display: inline-block：float布局会触发自动换行，inline-block配合nowrap能完美实现同行固定布局
• vertical-align: top：解决不同高度的容器之间的垂直对齐问题，避免出现错位
• 把百分比宽度改成固定像素值：确保容器尺寸不随窗口缩放变化
• 修复.card重复设置padding的问题：原代码中前后两次设置padding，后面的会覆盖前面的，这里统一成一次设置

这样调整后，不管怎么缩放窗口，你的.main、.side、.card都会保持固定尺寸，当总宽度超出窗口时，只会显示横向滚动条，再也不会堆叠或偏移啦！

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