右侧菜单（right-menu）贴附于main div底部的布局问题求助

问题根源：你的.main元素设置了width:60%同时添加了padding:15px，默认盒模型下padding会额外增加元素的实际宽度，导致左侧菜单(20%)+主内容(60%+padding)+右侧菜单(20%)的总宽度超过容器的100%，右侧菜单因此被挤到主内容下方。

方案一：修复浮动布局（调整盒模型） #

给所有元素设置box-sizing: border-box，让padding包含在设定的宽度内，同时移除主内容上不必要的margin:auto（浮动元素不需要这个）：

* {
  /* 全局统一盒模型，避免padding/margin影响宽度计算 */
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.menu {
  float: left;
  width: 20%;
  background-color: #536162;
  height: 100vh;
  border-right: 2px solid #424642;
}

.main {
  float: left;
  text-align: center;
  width: 60%;
  padding: 15px;
  background-color: #b1aea2;
}

.menu-right {
  float: left;
  width: 20%;
  background-color: #536162;
  border-left: 2px solid #424642;
  height: 100vh; /* 可选：让右侧菜单和左侧同高 */
}

HTML注意点：img的id不能重复（id必须唯一），建议去掉重复的id="img"，只保留class即可。

方案二：改用Flex布局（更简洁稳定） #

放弃浮动，用Flex布局实现三栏布局，不需要处理浮动清除，布局更可控：

修改后的HTML #

<div style="display:flex; min-height:100vh;">
  <div class="menu">
    <p class="menu-item">Chapter 1</p>
    <p class="menu-item">Chapter 2</p>
    <p class="menu-item">Chapter 3</p>
    <p class="menu-item">Chapter 4</p>
  </div>

  <div class="main">
    <img class="imgs" src="daisy.jpg">
    <img class="imgs" src="daisy.jpg">
    <img class="imgs" src="daisy.jpg">
    <img class="imgs" src="daisy.jpg">
    <img class="imgs" src="daisy.jpg">
    <img class="imgs" src="daisy.jpg">
  </div>

  <div class="menu-right">
    <p class="menu-item">Info 1</p>
    <p class="menu-item">Info 2</p>
    <p class="menu-item">Info 3</p>
    <p class="menu-item">Info 4</p>
  </div>
</div>

修改后的CSS #

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.menu {
  width: 20%;
  background-color: #536162;
  border-right: 2px solid #424642;
}

.main {
  flex: 1; /* 占据容器剩余空间，替代固定60%，适配性更强 */
  text-align: center;
  padding: 15px;
  background-color: #b1aea2;
}

.menu-right {
  width: 20%;
  background-color: #536162;
  border-left: 2px solid #424642;
}

Flex布局优势：自动对齐三栏高度，不需要处理浮动塌陷问题，响应式场景下调整更灵活。

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