如何在不修改HTML的情况下将right div置于右上角且避免缩放布局错乱？

我明白你的需求了——要让右侧的div跑到顶部，还不能改HTML、不能用相对/绝对定位，还要保证缩放时布局不乱对吧？

这里有两种稳妥的实现方式，都符合你的要求：

方式一：用Flexbox布局（推荐，更现代且适配性强） #

Flexbox天生就是为这种灵活布局设计的，完全不需要依赖浮动或者定位，修改CSS即可：

<style>
  /* 把body变成flex容器，子元素会自动按规则排列 */
  body {
    display: flex;
    flex-wrap: wrap;
    margin: 0; /* 去掉默认边距避免布局偏移 */
  }
  #left{
    width: 60%;
    height:200px;
    border:2px solid black;
  }
  #down{
    width: 60%;
    height:200px;
    border:2px solid black;
  }
  #right{
    width:40%;
    height:400px; /* 和左侧两个div总高度一致，也可以改成200px按需调整 */
    border:2px solid black;
    align-self: flex-start; /* 确保它对齐顶部 */
  }
</style>

原理说明： #

• display: flex让三个div变成flex项目，默认横向排列
• flex-wrap: wrap允许项目在空间不足时自动换行
• 左侧两个div各占60%宽度，右侧占40%，刚好填满一行，所以右侧div会自动占据第一行的右侧位置，完美对齐顶部；下方的div则会换行到左侧第二行
• 完全响应式，页面缩放时布局会自动适配，不会错乱

方式二：基于浮动调整（保留原布局思路） #

如果你更倾向于用原来的浮动方案，只需要调整宽度并加上box-sizing确保边框不影响布局计算即可：

<style>
  /* 全局设置box-sizing，让宽度包含边框，避免溢出 */
  * {
    box-sizing: border-box;
  }
  #left{
    width: 60%;
    height:200px;
    float:left;
    border:2px solid black;
  }
  #down{
    width: 60%;
    height:200px;
    border:2px solid black;
    float:left;
  }
  #right{
    width:40%;
    height:200px;
    border:2px solid black;
    float:right;
  }
</style>

原理说明： #

• 原来的问题是左侧两个div各占50%，加上边框后总宽度超过100%，导致右侧div被挤到下一行
• 用box-sizing: border-box让宽度包含边框，再把左侧div宽度改成60%，右侧40%，总宽度刚好100%
• 浮动元素会优先占据可用的顶部空间，所以右侧div会自动跑到右侧顶部位置

两种方案都不需要修改任何HTML内容，也不会用到相对/绝对定位，完全满足你的需求～

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