html - Div 元素在 float : right; 上变形

Question

我希望此图像和文本向右浮动并在它们周围保持一定距离，但它们会拉伸(stretch)默认分辨率并在 float: right; 上过度 float 。

#pageMain {
  margin: 100px;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
			As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

Answer 1

#pageMain {
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid #000;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
			As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

我认为这就是您想要做的，所以我为图像标记添加了一些样式并溢出:隐藏到父 #pageMain div。因为它的子元素是 float 的并且它有清除问题。