如何通过CSS对齐两个容器内的对应元素（不使用固定高度）

当然可以用纯CSS实现，而且用Flexbox就能完美解决你的需求——既不用固定高度，又能保留原有的语义化HTML结构，还能兼容所有现代浏览器。

问题根源 #

你的核心问题是：每个.item容器内的内容块（比如段落）高度不一致，导致后面需要对齐的元素（.something_else、.link）无法保持水平对齐。而我们不需要修改HTML结构，只需要调整CSS的Flex布局规则就能解决。

解决方案 #

我们给每个.item也设置为Flex容器，让内部元素垂直排列，再让可变高度的内容块自动填充剩余空间，从而把需要对齐的元素“推”到同一水平线：

html,body,div,h2 {margin:0; padding:0;}
.list { 
  display: flex; 
  justify-content: center; 
  gap: 20px; /* 可选：给两个item之间添加间距，提升视觉效果 */
}
.item { 
  max-width: 200px; 
  display: flex; /* 将item转为flex容器 */
  flex-direction: column; /* 内部元素垂直排列 */
}
.para { 
  flex-grow: 1; /* 关键属性：让段落自动填充剩余垂直空间 */
}
.something_else { color: red; }
.link {
  margin-top: auto; /* 可选：让底部链接始终对齐容器底部 */
}

关键属性解释 #

• flex-direction: column：让.item内部的元素从上到下垂直排列，保持原有的内容顺序。
• flex-grow: 1：作用在.para上时，它会自动占据.item内的剩余垂直空间。不管某个段落的内容是长是短，它都会“撑”到和另一个.item里的段落相同的有效高度，后面的.something_else自然就对齐了。
• margin-top: auto：如果需要让底部的.link始终对齐两个容器的底部，添加这个属性即可——它会把链接元素推到容器的最下方，完全不受上面内容高度变化的影响。

效果验证 #

当你修改任意.para的内容长度时，标注“This needed to be aligned”的.something_else和.link都会始终保持水平对齐，同时你的HTML结构完全保留了语义化，没有使用任何固定高度或破坏布局的技巧。

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