使用CSS @media查询在移动端或空间不足时将指定Div移至父容器下方

别担心，刚接触复杂CSS布局很正常，我完全懂你的困惑！你想要的效果是在移动端（或者空间不足时）把中间的divmiddle移到logo、国旗和邮箱那一行的下方，这个用Flex布局结合媒体查询就能轻松实现，咱们一步步来调整你的代码：

先说说你现有代码里的小问题 #

• 父容器#parent设置了min-width: 854px，这会导致移动端页面强制横向滚动，没法自适应窄屏
• Flex布局默认不换行，所以所有子元素会挤在一行，没法自动拆分
• 媒体查询里只设置了固定定位，没有调整核心的布局结构

关键调整步骤 #

1. 修正父容器基础样式

   • 去掉min-width: 854px，让容器能跟着屏幕宽度自适应
   • 添加flex-wrap: wrap，允许子元素在空间不够时自动换行
   • 把固定height: 100px改成height: auto，因为现在要容纳两行内容，固定高度会导致内容溢出

2. 给子元素设置Flex规则

   • 给#divlogo、#divflag、#divemail设置flex: none，让它们保持自身宽度，不会被压缩变形
   • 给#divmiddle设置flex: 1 0 100%，这个属性的意思是：占满整行宽度、不被压缩、强制换行到下一行，刚好满足你的需求

3. 优化移动端细节

   • 在媒体查询里调整图片尺寸和内边距，让移动端显示更紧凑；同时给固定定位的父容器加上left:0和right:0，确保它占满屏幕宽度

完整修改后的代码 #

<!DOCTYPE html>
<html>
<head>
<title>Move middle div to bottom in mobile device or when not enough space</title>
<style>
#parent {
  max-width: 100%;
  height: auto; /* 自适应内容高度 */
  display: flex;
  flex-wrap: wrap; /* 允许子元素换行 */
  background-color: yellow;
  align-items: center; /* 子元素垂直居中 */
}

#divemail {
  padding-left: 10px;
  padding-right: 10px;
  flex: none; /* 保持自身宽度 */
}

#divemail img {
  margin-left: auto;
  margin-right: auto;
  height: 80px;
  display: block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#divflag {
  border: 3px solid blue;
  padding-left: 10px;
  padding-right: 10px;
  flex: none; /* 保持自身宽度 */
}

#divflag img {
  margin: 0 auto;
  max-height: 70px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#divlogo {
  padding-left: 10px;
  padding-right: 10px;
  flex: none; /* 保持自身宽度 */
}

#divlogo img {
  margin: 0 auto;
  max-height: 70px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

#divmiddle {
  flex: 1 0 100%; /* 强制占满整行，换行到第二行 */
  text-align: center;
  border: 3px solid green;
  padding: 10px 0; /* 增加上下内边距优化布局 */
}

#divmiddle img {
  max-height: 70px;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* 移动端适配 */
@media (max-width: 480px) {
  #parent {
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* 占满屏幕宽度 */
  }
  
  /* 缩小移动端图片尺寸 */
  #divlogo img, #divflag img {
    max-height: 50px;
  }
  
  #divemail img {
    height: 60px;
  }
  
  #divmiddle img {
    max-height: 50px;
  }
  
  /* 减少内边距，节省空间 */
  #divlogo, #divflag, #divemail {
    padding-left: 5px;
    padding-right: 5px;
  }
}
</style>
</head>
<body>
<div id="parent">
  <div id="divlogo"><img src="logo.png" /></div>
  <div id="divflag"><img src="flag.png" /></div>
  <div id="divemail"><img src="email.png" /></div>
  <div id="divmiddle"><img src="middle.png" /></div>
</div>
</body>
</html>

额外小提示 #

我把divmiddle的HTML位置调整到了最后，这样在Flex布局里它会自然排在第二行；当然即使不调整结构，通过flex:1 0 100%也能实现换行，但调整结构更符合语义逻辑。

这样修改后，桌面端会保持你原来的布局（空间足够时），当屏幕宽度缩小到480px以下（或者空间不足时），divmiddle就会自动换行到第二行，完全符合你想要的效果！

内容来源于stack exchange