网页屏幕缩小时文字覆盖图片的CSS修复方案咨询

这个问题核心是你用了固定宽度的图片和传统的float布局，没做响应式适配，导致屏幕变窄时两个浮动元素挤在一起重叠。下面是几个关键修改点，一步步解决：

• 移除图片的固定宽度，改用百分比适配容器：原来的img设置了width: 600px，这在小屏幕上会直接撑破父容器，改成width: 100%让图片自适应父容器的宽度，同时保持圆角样式。
• 替换Float布局为Flexbox：Float布局天生对响应式支持较差，用Flexbox可以更灵活地分配空间，并且在空间不足时自动调整元素排列方式。
• 把固定高度改成最小高度：原来的#facilities设置了height: 430px，小屏幕下内容会溢出容器，改成min-height: 430px既保证基础高度，又能随内容自动扩展。
• 调整内边距为相对单位：固定的padding值在小屏幕上会占用过多空间，改用百分比让内边距随屏幕大小自适应。
• 添加媒体查询优化小屏幕布局：当屏幕宽度小于768px时，让图片和文字区域垂直排列，避免横向挤压重叠。

修改后的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
#facilities{
  min-height: 430px;
  background: #fff;
}
#facilities .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
#facilities .facility-img {
  width: 40%;
}
#facilities .facility-img img{
  width: 100%;
  border-radius: 50%;
  padding: 5% 10%;
  box-sizing: border-box; /* 让padding包含在宽度内，避免撑破容器 */
}
#facilities .facility-info{
  width: 55%;
  text-align: center;
}
#facilities .facility-info h1{
  color: #333;
  margin-bottom: 20px;
}
#facilities .facility-info p{
  color: #333;
  line-height: 1.6;
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  #facilities .container {
    flex-direction: column;
    padding: 30px 20px;
  }
  #facilities .facility-img,
  #facilities .facility-info {
    width: 100%;
  }
  #facilities .facility-info {
    margin-top: 20px;
  }
}
</style>
</head>
<body>
<section id="facilities">
<div class="container">
<div class="facility-img ">
<img src="https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="facility-photo">
</div>
<div class="facility-info">
<h1>In a hospital , half of the patients get better food than at home.</h1>
<p>~Gerhard KocSher</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.Sit autem ducimus delectus nam aut neque vitae, ab repellendus, qui, quibusdam eum commodi sunt? Non veniam quos illo, assumenda doloremque sit possimus sunt architecto quo neque doloribus provident consequuntur eius error. </p>
</div>
</div>
</section>
</body>
</html>

补充说明几个关键改动的作用：

• Flexbox布局让两个元素在容器内均匀分配空间，align-items: center保证垂直居中对齐；
• box-sizing: border-box确保图片的padding不会额外增加宽度，避免超出父容器；
• 媒体查询在小屏幕时切换为垂直布局，让图片和文字各自占满宽度，彻底解决重叠问题；
• 调整了内边距和段落行高，提升移动端的阅读体验。

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