移动端三个并排Div显示异常问题求助

我看了你的页面情况，三个并排的表单、地图、地址div在宽屏显示正常，但移动端最后一个错位下移，大概率是没做响应式适配导致的——固定宽度或float布局在小屏幕下容器放不下，元素就会被挤得混乱。咱们用最靠谱的flexbox方案来解决，步骤如下：

1. 重构外层容器conHolderDiv的CSS #

把外层容器改成flex布局，让子元素自动适配不同屏幕宽度：

.conHolderDiv {
  display: flex;
  flex-wrap: wrap; /* 屏幕宽度不足时自动换行 */
  gap: 1.2rem; /* 给三个div之间加均匀间距，避免挤在一起 */
  box-sizing: border-box;
  padding: 0 1rem; /* 可选，让内容不贴屏幕边缘 */
}

2. 设置子div的响应式宽度 #

给三个子div设置弹性属性，让它们在宽屏平分空间，移动端自动占满全屏：

.conHolderDiv > div {
  flex: 1 1 280px; /* 核心属性：
                     flex-grow:1 → 有空余空间时自动拉伸
                     flex-shrink:1 → 空间不足时自动收缩
                     flex-basis:280px → 最小宽度280px，小于这个就换行
                   */
  box-sizing: border-box; /* 确保padding/border不额外占用宽度，避免布局溢出 */
}

3. 清理旧布局的冲突属性 #

如果之前给子div加了float属性，一定要去掉——flex和float不能兼容：

.conHolderDiv > div {
  float: none; /* 移除float属性 */
}

4. 优化地图div的稳定性 #

谷歌地图加载后可能会改变高度，给它设置最小高度避免布局跳动：

/* 替换成你实际的地图div类名 */
.mapContainer {
  min-height: 300px;
}

备选方案：用媒体查询兼容旧浏览器 #

如果需要兼容非常老旧的浏览器（比如IE9及以下），可以用媒体查询替代flexbox：

/* 宽屏设备（≥768px）：三个div并排 */
@media (min-width: 768px) {
  .conHolderDiv > div {
    width: 31.5%; /* 留一点间隙，总宽度不超过容器 */
    float: left;
    margin-right: 1.75%;
  }
  /* 最后一个div去掉右边距 */
  .conHolderDiv > div:last-child {
    margin-right: 0;
  }
}

/* 移动端（<768px）：每个div占满全屏 */
@media (max-width: 767px) {
  .conHolderDiv > div {
    width: 100%;
    float: none;
    margin-right: 0;
    margin-bottom: 1.2rem; /* 给div之间加底部间距 */
  }
}

修改完后，在移动端模拟器或者真实手机上测试下，三个div在小屏幕会自动垂直排列，不会再错位，宽屏时依然保持并排。如果还有表单或地图的细节适配问题，再针对性调整元素的内边距或者字体大小就行。

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