如何在display: table容器中实现两个div移动端垂直排列？

针对你当前的桌面端左右并排布局（display: table容器+绝对定位图片），要在移动端实现文本在上、图片在下的垂直布局，仅通过**媒体查询（Media Query）**修改对应屏幕尺寸的样式即可，无需改动HTML结构。

修改后的完整CSS代码 #

/* 桌面端原有样式保持不变 */
.container-article {display: table; width: 100%; position: relative;}
.left {width: 50%;}
.right {position: absolute; top: 0px; left: 50%; width: 50%; height: 100%; overflow-y: auto;}

/* 移动端响应式样式（以768px为断点，可按需调整） */
@media (max-width: 768px) {
  .container-article {
    display: block; /* 取消table布局，回归正常块级流 */
    position: static; /* 取消相对定位，避免干扰子元素布局 */
  }
  .left {
    width: 100%; /* 文本容器占满整行宽度 */
  }
  .right {
    position: static; /* 取消绝对定位，回到文档流 */
    top: auto;
    left: auto;
    width: 100%; /* 图片容器占满整行宽度 */
    height: auto; /* 高度自适应图片内容 */
    overflow-y: visible; /* 取消滚动，正常显示完整图片 */
  }
  /* 可选：让图片自适应容器宽度，避免超出屏幕 */
  .right img {
    width: 100%;
    height: auto;
  }
}

关键说明 #

• 媒体查询的max-width: 768px是常用移动端断点，你可以根据实际需求调整为其他值（比如640px）。
• 在移动端样式中，我们重置了容器的特殊布局属性：把container-article的display从table改回block，取消相对定位；让right容器脱离绝对定位，回归正常文档流，自然排在left容器下方。
• 额外添加的图片自适应样式，能确保图片不会超出移动端屏幕宽度，优化显示效果。

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