17370845950

本文介绍如何用现代 css grid 替代浮动布局，实现左侧文本、右侧图片的并排结构，并正确添加内边距、保持响应式，避免传统 float + padding 导致的布局错乱问题。

在早期 Web 开发中，开发者常依赖 float 实现多栏布局，但 float 本身并非为布局设计，容易引发清除浮动、盒模型计算（如 padding 和 width 冲突）、响应式断裂等问题——正如你在代码中遇到的：给左栏

添加 padding: 20px 后，width: 50% 的实际占用宽度变为 50% + 40px，导致超出容器，右侧图片被挤到下一行。

现代推荐方案是使用 CSS Grid：语义清晰、天然支持间距控制、无需 hack 清除浮动，且配合媒体查询可轻松适配小屏幕。

✅ 推荐写法：Grid 布局 + 自动内边距

以下是一个简洁、健壮、响应式的实现：

  
  
  
  


  
    
      
What We Do
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Morbi tincidunt ornare massa eget egestas. Vel eros donec ac odio tempor. Est velit egestas dui id ornare arcu odio ut sem. Urna porttitor rhoncus dolor purus non enim praesent elementum facilisis.
    
    @@##@@
  

? 关键要点说明：

• grid-template-columns: 1fr 1fr 比 50% 50% 更可靠：fr 单位基于剩余空间分配，自动容纳 padding 和 gap，彻底规避盒模型宽度溢出问题；
• gap 属性统一管理列间/行间间距，比分别设置 margin-left 或 margin-right 更可控、语义更强；
• 每个子元素（div 和 img）单独设置 padding 安全有效 —— 因为 Grid 子项的 padding 不影响网格轨道尺寸，只作用于自身内容区域；
• 移动优先 + 媒体查询：默认单列堆叠（利于小屏阅读），仅在足够宽视口才启用双列，符合用户体验最佳实践；
• img { display: block } 防止底部默认空白间隙（由行内元素基线对齐引起）。

⚠️ 注意事项：

• 避免混用 float 与 Grid —— 一旦父容器设为 display: grid，其子元素的 float 属性将失效；
• 若需兼容 IE11，Grid 需降级为 Flexbox（display: flex + flex: 1），但本文聚焦现代标准方案；
• 图片建议始终添加 alt 属性以保障可访问性。

通过采用 CSS Grid，你不仅能优雅解决 padding 错位问题，还能获得更易维护、更具扩展性的响应式布局基础。