设置float:right后Div元素变形，图片文本拉伸分辨率且过度右浮求助

嘿，我来帮你搞定这个浮动布局的小麻烦！你遇到的图片拉伸、元素过度右移问题，主要是几个CSS设置的细节没处理好，咱们来一步步调整：

关键调整思路 #

• 修复图片拉伸：你给图片设了固定的width:800px，但它的容器#aboutGame宽度只有420px，直接导致图片被强制拉伸超出容器。改用max-width:100%让图片自适应容器宽度，搭配height:auto保持原比例，避免变形。
• 解决过度右移：给浮动的#aboutGame加个margin-left，既能和左侧内容（如果有的话）保持间距，也能避免它完全贴死父容器右侧；同时给父容器#pageMain加overflow:auto，确保它能包裹住浮动元素，防止布局塌陷。
• 优化文本排版：删掉#aboutGame span里无效的width: ;设置，把span改成块级元素，再给文本和图片之间加个间距，排版更清爽。

修改后的完整代码 #

CSS 部分 #

#pageMain { 
  margin: 100px; 
  overflow: auto; /* 包含浮动元素，防止父容器高度塌陷 */
}
#aboutGame { 
  float: right; 
  width: 420px; 
  padding: 10px; 
  margin-left: 20px; /* 左侧留间距，避免过度靠右或挤着其他内容 */
}
#aboutGame span { 
  display: block; /* 让文本块单独占一行 */
  font-size: 20px; 
  font-family: 'Lato', sans-serif; 
  margin-bottom: 15px; /* 文本与图片之间的间距 */
}
#aboutGame img { 
  border: 3px solid black; 
  max-width: 100%; /* 图片宽度不超过容器 */
  height: auto; /* 保持图片比例，避免拉伸变形 */
}

HTML 部分 #

<section id="pageMain">
  <div id="aboutGame">
    <span>仿佛从沉睡中苏醒，你发现自己身处一个充满古代遗迹与先进科技的奇异矛盾世界。受创造者之命，你需要解决一系列日益复杂的谜题，必须决定是选择信仰，还是提出那些艰难的问题：你是谁？你的目的是什么，你又该为此做些什么？</span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" alt="游戏场景图" />
  </div>
</section>

这样调整后，图片会自适应容器大小、保持原比例，浮动元素也会停在合适的位置，周围的间距也更合理啦！

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