HTML CSS 横幅对齐

Question

有人可以帮我解决为什么我的“desc”内容不在横幅中标题的正下方吗？我已经发布了我的 CSS 和 HTML 代码。我还张贴了结果的照片。

#bannerBottom {
  border: 5px #0087dd solid;
  margin-top: 30px;
  margin-bottom: 50px;
}

#bannerImg {
  width: 150px;
  margin-top: 7px;
  margin-left: 10px;
  display: inline-block;
}

#bannerContent {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
}

#bannerContent>span {
  font-size: 20px;
  font-weight: bold;
  font-family: arial;
  color: steelblue;
  display: inline-block;
}

#desc {
  font-family: arial;
  display: inline-block;
  margin-left: 190px;
}

<div id="bannerBottom">
  <img id="bannerImg" src="http://www.placehold.it/100x100">
  <p id="bannerContent">
    <span>The Big 3 - HTML, CSS, JavaScript</span>
  </p>
  <p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>

Answer 1

您可以将图像向左浮动，而不是将其设为行内 block 元素。此外，也没有必要将该段落设为行内 block 。

#bannerBottom {
  border: 5px #0087dd solid;
  margin-top: 30px;
  margin-bottom: 50px;
}

#bannerImg {
  width: 150px;
  margin-top: 7px;
  margin-left: 10px;
  float: left;
}

#bannerContent {
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
}

#bannerContent>span {
  font-size: 20px;
  font-weight: bold;
  font-family: arial;
  color: steelblue;
  display: inline-block;
}

#desc {
  font-family: arial;
  margin-left: 190px;
}

<div id="bannerBottom">
  <img id="bannerImg" src="http://www.placehold.it/100x100">
  <p id="bannerContent">
    <span>The Big 3 - HTML, CSS, JavaScript</span>
  </p>
  <p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>