Question

我希望这个图像和文本向右浮动并在它们周围留出一些距离，但是它们会伸展出默认分辨率并在 float：right; 上浮动。

#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;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: 100%;
  text-align:right;
  display: block;
  font-size: 20px;
  margin-bottom: 50px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  width:100%;
  height: auto;
}

<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" />
  </div>
</section>

我对您的代码所做的更改：

1。按照 showdev 的建议从图片代码中删除了width和height属性，因为它使图片大于容器本身。

<强> 2

#aboutGame span {
    width: 100%; //Define width the span takes
    text-align:right; //Aligns the text to right, you can use left/center/justify according to your need
    display: block; //Displays elements as a block 
    margin-bottom: 50px; // Gives spacing between image and text
  }

  #aboutGame img {
    height: auto; // Takes the height according to the width
  }

Answer 2

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

我认为这是你想要做的，所以我在图片标签和溢出中添加了一些样式：隐藏到父#pageMain div。因为它的子元素是浮动的，而且它有清除问题。

Div元素在float：right;

2 个答案: