同一div内两列水平对齐问题：右侧列居下求解决方案

问题根源 #

你当前代码里的h2设置了clear: left，这个属性会强制它下方的元素换行，直接导致右侧的p被挤到下方；另外h2的margin: auto也会干扰浮动布局的对齐逻辑。

方案一：修复浮动布局 #

调整CSS，移除导致换行的属性，给两列分配合理宽度：

article {
  margin: 0 auto;
  padding-top: 80px!important;
  padding-bottom: 10%!important;
  width: 80%;
}

article:after {
  content: '';
  display: block;
  clear: left;
  margin: 0;
}

h2, p {
  font-size: 1em;
  font-weight: normal;
  float: left;
}

h2 {
  text-align: start;
  width: 250px; /* 给左侧列固定宽度 */
  margin: 0; /* 移除auto margin */
}

p {
  margin: 0 0 0 50px; /* 调整间距，避免太宽 */
  width: calc(100% - 300px); /* 计算右侧列宽度，总宽度减左侧宽度和间距 */
  white-space: normal;
}

方案二：使用Flexbox布局（更推荐） #

浮动布局容易出问题，用现代的Flexbox更稳定，代码也更简洁：

article {
  margin: 0 auto;
  padding-top: 80px!important;
  padding-bottom: 10%!important;
  width: 80%;
  display: flex; /* 开启flex布局 */
  gap: 50px; /* 两列之间的间距 */
  align-items: flex-start; /* 顶部对齐 */
}

h2 {
  font-size: 1em;
  font-weight: normal;
  text-align: start;
  flex: 0 0 250px; /* 固定左侧宽度，不伸缩 */
}

p {
  font-size: 1em;
  font-weight: normal;
  flex: 1; /* 右侧列自动占满剩余空间 */
  margin: 0;
}

HTML不需要修改，保持原有结构即可。

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