如何实现两个<div>元素垂直对齐？解决#archive与#aboutGame布局异常

看起来你是想让同一个section里的#archive和#aboutGame容器并排显示，但目前内容被挤压、垂直对齐错位对吧？这通常是因为float布局的默认行为或者缺少必要的对齐设置导致的，我给你两种可行的解决方案：

方案1：使用Flexbox布局（推荐，现代浏览器兼容） #

Flexbox是现在最省心的布局方式，能轻松实现并排和垂直对齐，无需依赖float。修改你的CSS如下：

/* 给包含两个容器的父section设置flex布局 */
section {
  display: flex;
  align-items: flex-start; /* 让两个容器顶部对齐，可选值：center（居中）/ baseline（基线对齐） */
  gap: 20px; /* 两个容器之间的间距，替代手动设置margin */
}

#pageMain {
  position: relative;
  clear: both;
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  /* 移除float:right，flex会自动处理排列 */
  width: 430px;
  padding: 10px;
}

#archive {
  flex: 1; /* 让#archive自动占据剩余空间，也可以设置固定宽度比如width: 60%; */
  padding: 10px;
}

方案2：修复float布局（如果你坚持使用float） #

如果不想改用Flexbox，只需给#archive添加float和宽度，并设置垂直对齐：

#pageMain {
  position: relative;
  clear: both;
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  float: right;
  width: 430px;
  padding: 10px;
  vertical-align: top; /* 强制顶部对齐，解决内容挤压错位 */
}

#archive {
  float: left;
  width: calc(100% - 450px); /* 减去#aboutGame的宽度+左右padding（430+20） */
  padding: 10px;
  vertical-align: top;
}

问题原因说明 #

1. 你之前只给#aboutGame设置了float:right，但#archive没有设置float和宽度，导致它默认占据整行，把#aboutGame挤到下方；
2. 即使两个元素都float，默认的vertical-align是基线对齐，会导致文本/图片错位，设置vertical-align:top就能让内容顶部对齐。

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