CSS Media queries不生效求助：并排Div响应式适配异常

先梳理你代码里的核心问题：

• 缺少父容器的Flex布局：两个div默认是块级元素，会自动换行，无法直接并排显示
• 媒体查询逻辑重复无效：两个查询都把.field__item设为100%，且断点范围重叠，起不到响应式切换作用
• 图片标签语法错误：<img>的src属性后多了分号，会导致图片加载失败

修正后的完整代码 #

<style type="text/css">
  /* 父容器设置flex，控制子元素并排 */
  .container {
    display: flex;
    gap: 10px; /* 可选：给两个div添加间距 */
    flex-wrap: wrap; /* 空间不足时自动换行，配合媒体查询 */
  }

  .block-content-right {
    background-color:#e0e620;
    flex: 1;
    min-width: 228px; /* 可选：设置最小宽度，避免元素被过度挤压 */
  }

  .field__item {
    flex: 1;
    min-width: 228px; /* 可选：设置最小宽度 */
  }

  /* 屏幕宽度≤600px时，每个div占满整行 */
  @media (max-width: 600px) {
    .block-content-right, .field__item {
      width: 100%;
      flex: none; /* 取消flex占比，强制占满宽度 */
    }
  }
</style>

<!-- 给两个div添加父容器，用flex控制布局 -->
<div class="container">
  <div class="block-content-right">
    <p>The people the people the people</p> 
  </div>

  <div class="field__item">
    <img src="blah blah.jpg"> <!-- 移除src属性后多余的分号 -->
  </div>
</div>

关键修复说明 #

1. 添加Flex父容器：
   给两个div套上.container，设置display: flex让子元素横向排列，flex-wrap: wrap确保空间不足时自动换行。

2. 优化媒体查询逻辑：
   统一设置屏幕宽度≤600px时，两个div都占满100%宽度，实现移动端堆叠显示的效果。

3. 修正图片标签错误：
   移除src属性后的分号，保证图片正常加载。

4. 可选最小宽度设置：
   给div添加min-width，避免屏幕缩小时元素被挤压过窄，提升页面可读性。

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