仅使用style属性实现多Div内响应式网格布局求助

核心思路 #

因为不能用媒体查询，我们可以利用Flexbox的弹性换行特性实现响应式布局：给容器设置display: flex; flex-wrap: wrap; gap: 1rem;，再给两个子元素设置flex: 1 1 300px;——子元素会尽可能占满可用空间，当容器宽度小于两个子元素最小宽度（300px）之和时，自动换行变成竖布局。

优化后的完整代码 #

<div style="border: hidden; border-radius: 20px; box-shadow: 0 0 5px red; text-align: center; font-family: monospace; color: black; background-image: linear-gradient(#e6558b, red); padding: 10px; max-width: 100vw; margin: 10px;">
  
  <div style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; margin: inherit; max-height: 75px;">
    <p style="font-weight: bold; margin: 5px 0;"><img src=""> title <img src=""></p>
    <p style="margin: 5px 0;">subtitle</p>
  </div>
  
  <div style="background-color: white; border: hidden; border-radius: 20px; box-shadow: 0 0 5px white; padding: inherit; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 1rem;">
      
    <div style="border: 1px solid black; height: 100px; flex: 1 1 300px; display: flex; align-items: center; justify-content: center;">
      <p><img src=""></p>
    </div>
    
    <div style="border: 1px solid black; height: 100px; flex: 1 1 300px; display: flex; align-items: center; justify-content: center;">
      <p>lorem ipsum</p>
    </div>
  </div>
</div>

关键修改点说明 #

• 修复原代码中max-width: vw的错误写法，改为max-width: 100vw确保容器不超出视口宽度
• 给标题区的<p>标签添加margin: 5px 0，避免默认间距导致内容溢出
• 将子元素容器的布局从Grid改为Flexbox，简化换行逻辑：
  • display: flex启用弹性布局
  • flex-wrap: wrap允许子元素空间不足时自动换行
  • gap: 1rem统一控制子元素间距，替代原有的grid-gap
• 给两个子元素设置flex: 1 1 300px：
  • 第一个1：子元素平分可用空间（宽布局时并排且宽度一致）
  • 第二个1：允许子元素缩小，增强兼容性
  • 300px：子元素最小宽度，容器宽度小于600px时自动切换为竖布局
• 给子元素添加display: flex; align-items: center; justify-content: center;，确保内部内容居中，替代原无效的align-items属性

额外优化建议 #

• 移除原代码中无效的align-items: center（仅在Flex/Grid容器中生效，原父容器未设置对应布局）
• 去掉冗余类名（无法用外部样式表，类名仅作标识不影响样式）
• 统一间距单位，避免混用inherit和固定值导致布局混乱

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