如何让div在不同显示器下保持一致布局不堆叠？

问题根源 #

你当前的布局用了固定宽度+固定margin，再加上inline-block元素默认的空白间距，台式机屏幕宽度足够时总宽度（225px + 50px + 1000px + 300px）没超视口，但笔记本屏幕窄时，总宽度超过视口就会自动换行堆叠。你只缩小div宽度，没算上margin和空白间距的额外宽度，所以没用。

推荐解决方案：用Flexbox布局（现代布局首选） #

Flexbox能自动处理子元素的排列，避免手动计算宽度和间距，适配不同屏幕更灵活。修改后的代码如下：

CSS代码

body {
  background-color: darkgray;
  /* 把body设为flex容器，子元素横向排列 */
  display: flex;
  align-items: flex-start; /* 垂直方向顶部对齐，可按需调整 */
  padding: 75px 20px 0; /* 避免元素贴屏幕边缘 */
  margin: 0; /* 清除body默认margin */
}

div {
  border: solid 1.5px black; /* 简化border写法 */
}

.outer {
  height: 850px;
  width: 225px; /* 保持原固定宽度 */
  border-radius: 10px;
  margin-right: 50px; /* 控制和右侧div的间距，替代原固定margin-left */
}

.mid {
  width: 200px;
  height: 75px;
  margin-left: 12.5px;
  margin-top: 10px;
  border-radius: 10px;
}

.body-model {
  height: 850px;
  flex: 1; /* 自动占满剩余空间 */
  max-width: 1000px; /* 限制最大宽度，避免过宽 */
  border-radius: 10px;
}

关键修改点

1. 给body添加display: flex，让两个子div默认横向排列，不会轻易换行；
2. 移除.outer的margin-left: 300px，换成margin-right: 50px控制两个div的间距，同时给body加padding避免元素贴边；
3. 给.body-model设置flex:1，让它自动填充剩余空间，同时用max-width限制最大宽度，保持原设计的上限。

备选方案：修复inline-block布局问题 #

如果不想用Flexbox，也可以通过消除空白间距+调整宽度来解决：

1. 消除inline-block的空白：把HTML中两个div的标签连在一起（<div class="outer"></div><div class="body-model"></div>），或者给父元素加font-size:0，子元素再恢复font-size；
2. 用calc()计算宽度，把固定宽度换成百分比，确保总宽度（含margin）不超过视口。

示例CSS

body {
  background-color: darkgray;
  margin: 0;
  padding: 75px 20px 0;
  font-size: 0; /* 消除inline-block空白 */
}

div {
  border: solid 1.5px black;
  font-size: 16px; /* 恢复字体大小 */
}

.outer {
  height: 850px;
  width: calc(20% - 40px); /* 用calc计算可用宽度 */
  border-radius: 10px;
  margin-right: 50px;
  display: inline-block;
}

.body-model {
  height: 850px;
  width: calc(80% - 10px);
  border-radius: 10px;
  display: inline-block;
}

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