如何让bottom div定位在top div下方？CSS布局问题求助

我希望bottom div能够定位在top div的下方，但当前设置后并未达到预期效果，请问该如何实现？

相关代码 #

JSX代码：

<div className={styles.topContainer}>
  <img className={styles.leftImage} src={imageURL + details?.poster_path} />
  <img className={styles.rightImage} src={allImages[0]} />
</div>

<div className={styles.bottomContainer}>
  <div className={styles.genres}><Genre genres={genreList} /></div>
  <p className={styles.overview}>{details.overview}</p>
</div>

CSS样式：

.topContainer {
    height: 500px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.leftImage {
    min-width: 0;
    max-height: 100%;
    object-fit: contain;  
    align-items: center;
}

.rightImage {
    margin-left: 20px;
    min-width: 0;
    max-height: 100%;
    object-fit: contain;  
    align-items: center;
}

.bottomContainer {
    margin-top: 20px;
    margin-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

解决方案 #

默认情况下块级div会自动垂直排列，出现问题大概率是父元素布局或脱离文档流的设置导致，按以下步骤排查修复：

1. 调整父元素flex布局方向
   如果这两个div的父容器设置了display: flex且默认flex-direction: row，会强制子元素横向排列。解决方法是给父容器添加flex-direction: column，让子元素垂直分布：

// 给两个div包裹父容器
<div className={styles.parentContainer}>
  <div className={styles.topContainer}>...</div>
  <div className={styles.bottomContainer}>...</div>
</div>

.parentContainer {
  display: flex;
  flex-direction: column;
}

2. 移除脱离文档流的定位属性
   如果topContainer被设置了position: absolute或position: fixed，会脱离正常文档流，导致bottomContainer跑到它下方重叠。直接移除这类定位属性即可，让元素留在文档流中自然排列。

3. 清除浮动影响
   如果全局样式给div添加了float: left，会破坏垂直排列。可以给topContainer添加clear: both，或者给父容器设置overflow: hidden来清除浮动：

.topContainer {
    /* 保留原有样式 */
    clear: both;
}

内容的提问来源于stack exchange，提问作者İdris Uslu