如何使用CSS在两个元素间插入内容并修复帖子视频布局？

问题现状 #

用户上传视频时，视频被嵌入黄色文本框内，排版混乱；需要将视频移至黄色文本框下方，同时让周围内容自动适配布局，避免元素重叠。

问题根源 #

1. 大量元素使用position: absolute，脱离文档流后无法自动占据空间、互相适配，极易出现重叠
2. 视频组件ReactPlayer被直接嵌套在黄色文本框的text-container内部，导致视频显示在框内

解决方案 #

核心修改点 #

• 移除不必要的position: absolute，改用流式布局（Flex/Grid）让元素自然排列
• 将视频组件从文本框容器中移出，作为独立元素放在文本框下方
• 取消容器的固定高度限制，让高度自适应内容

修改后的完整代码 #

<Grid container item>
  <div id="post-container" style={{margin: '5% auto', width: '90%', backgroundColor: 'white', borderRadius: '30px', padding: '20px', overflow: 'auto'}}>
    {/* 用户信息区域 - 改用Flex布局 */}
    <div style={{display: 'flex', alignItems: 'center', marginBottom: '20px'}}>
      <Avatar src={<AvatarPicture/>} style={{height: '60px', width: '60px'}} size='lg'></Avatar>
      <div style={{marginLeft: '15px'}}>
        <p style={{fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '500', fontSize: '20px', lineHeight: '25px', margin: '0 0 5px 0'}}>@{state.posts[i].username}</p>
        <div style={{display: 'flex', gap: '15px'}}>
          <p style={{fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#6D7683', margin: 0}}>{state.storage.location}</p>
          <p style={{fontFamily: 'Outfit', fontStyle: 'normal', fontWeight: '400', fontSize: '16px', lineHeight: '20px', color: '#2D87FF', margin: 0}}>{state.posts[i].date}</p>
        </div>
      </div>
    </div>

    {/* 黄色文本框容器 */}
    <div id="text-container" style={{backgroundColor: '#FFFBEE', width: '100%', borderRadius: '16px', padding: '1em', marginBottom: '20px', overflowWrap: 'break-word', wordBreak: 'break-word'}}>
      <p style={{margin: 0}}>{state.posts[i].text}</p>
    </div>

    {/* 独立的视频组件 */}
    {state.posts[i].video && (
      <div style={{width: '100%', marginBottom: '20px'}}>
        <ReactPlayer url={state.posts[i].video} width="100%" controls />
      </div>
    )}

    {/* 点赞、评论、分享按钮区域 */}
    <div style={{display: 'flex', alignItems: 'center', gap: '20px', marginBottom: '20px'}}>
      <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
        <IconButton onClick={() => handleLike(i)} onMouseLeave={() => setMouseOver(false)} onMouseOver={() => setMouseOver(true)}>
          {like[i] && mouseOver ? <HeartBrokenIcon style={{color: 'red'}}/> : like[i] ? <FavoriteIcon style={{color: 'red'}} /> : <FavoriteBorderTwoToneIcon /> }
        </IconButton>
        <p style={{margin: 0}}>{state.posts[i].likes}</p>
      </div>
      <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
        <IconButton onClick={() => handleReplies(i)}>
          {replies[i] ? <MessageIcon color="primary"/> : <MessageOutlinedIcon/>}
        </IconButton>
        <p style={{margin: 0}}>{state.posts[i].comments}</p>
      </div>
      <div style={{display: 'flex', alignItems: 'center', gap: '5px'}}>
        <IconButton><IosShareOutlinedIcon /></IconButton>
        <p style={{margin: 0}}>{state.posts[i].shares}</p>
      </div>
    </div>

    {/* 评论输入框 */}
    <TextField 
      InputProps={{
        startAdornment: (
          <InputAdornment>
            <Avatar src={state.storage.profileImageURL} />
          </InputAdornment>
        ),
        classes: {
          notchedOutline: 'notched-outline-border-radius'
        }
      }} 
      maxRows={10} 
      inputProps={{maxLength: 500}} 
      multiline 
      style={{width: '100%', background: '#F8FAFF', border: '1px solid #D9E1F9', borderRadius: '16px'}} 
      placeholder='Write your comment'
    ></TextField>
  </div>
</Grid>

关键修改说明 #

1. 用户信息区：改用Flex布局替代绝对定位，元素自动对齐且不会重叠
2. 文本容器：移除绝对定位，添加内边距和外边距，确保文本与视频分离
3. 视频组件：单独提取为独立元素，设置宽度100%，并添加条件渲染（仅存在视频时显示）
4. 操作按钮区：改用Flex布局，按钮与数字自然对齐，避免绝对定位的偏移问题
5. 容器高度：取消固定height:40%，改为自适应内容，同时添加内边距提升视觉效果
6. 评论输入框：移除绝对定位，设置宽度100%，自动适应容器宽度

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