HTML/CSS中长文本导致div下沉、布局错乱如何修复？

你当前用display: inline-block实现两栏并排的写法，本身存在两个默认行为，直接导致了你遇到的布局错乱：

• inline-block元素默认垂直对齐规则是vertical-align: baseline（基线对齐）：当第二个div内文本变长、元素高度变化时，元素的基线位置会随内容下移，最终带动整个主文本div向下偏移，无法和左侧列表顶部对齐。
• inline-block元素总宽度超出父容器可用宽度时会自动折行：你在主内容区给分隔线写死了1000px的固定宽度，缩小页面时两个div加分隔线的总宽度超过视口宽度，主文本区就会被挤到下一行。

方案1：修正现有inline-block布局（改动最小） #

1. 给.inline类补充垂直对齐属性，强制两个并排div顶部对齐：

.inline {
  display: inline-block;
  /* 新增以下属性解决垂直偏移问题 */
  vertical-align: top;
}

2. 给主文本区增加宽度约束，避免内容撑破容器，同时去掉分隔线的固定宽度：

.main_text {
  /* 宽度按需调整，数值为总宽度减去左侧列表div的宽度 */
  width: calc(100% - 220px);
  padding: 0 16px;
  /* 内边距算入总宽度，避免宽度溢出 */
  box-sizing: border-box;
}

/* 替换html里hr写死的width属性，用css控制自适应宽度 */
.main_text hr {
  width: 100%;
  border: none;
  border-top: 1px solid #eee;
}

3. 删除HTML中<hr>标签上的width="1000px"硬编码属性，让分隔线跟随父容器宽度自适应。

方案2：改用Flex布局（更稳定，推荐） #

如果不想反复调试inline-block的对齐问题，可以直接用Flex实现两栏布局，容错率更高：

1. 给两个并排div的外层套一个父容器，给父容器加Flex相关样式：

.page-wrap {
  display: flex;
  /* 子元素顶部对齐 */
  align-items: flex-start;
  /* 两个区块之间的间距 */
  gap: 20px;
  /* 视口过窄时自动换行，避免内容挤压 */
  flex-wrap: wrap;
}

2. 分别给左右两个区块设置宽度：左侧列表div设固定宽度，右侧主文本区设自适应宽度即可，不需要再依赖inline-block的对齐规则。

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