fdc3479d-59be-4b48-a844-5e5d42cae850.png

昨天解决了 left 无法等高两栏的情况, 明明 left 和 right 的高度相等, 为什么还会出现.right 比 .left 短，底部没有对齐的情况。,我们分析下是什么原因造成的:

1. Flex 子项默认高度由内容撑开
   .bd 是 display: flex;
   .left 只有一张图片，高度就是图片高度
   .right 里有 .top 和 ul，它们是竖直排列（默认 display: block）

2. .right 不是 flex 布局
   .right 里的 .top 和 ul 默认是上下堆叠，高度由内容决定，不会自动填满父容器
   所以 .right ul 的底部不会自动和 .left 底部对齐

3. .right 没有被拉伸
   只有 .bd 的直接子元素（.left 和 .right）会被 flex 拉伸等高
   .right 里面的内容不会自动拉伸到底部

总结: left 的高度为图片高度, 而 right 的高度为 top 和ul 的内容高度; 这时图片的高度大于 right 的高度, 所以会造成对不齐的情况

解决办法:
让 .right 变成 flex 布局，竖直方向排列，并让 ul 自动填满剩余空间

.bd .right {
  display: flex;
  flex-direction: column;
}

.bd .right .top {
  /* 高度自适应内容 */
}

.bd .right ul {
  flex: 1; /* 占据剩余空间，底部就能和 .left 对齐 */
}