HTML CSS横幅对齐

Question

Can someone please help me out why my "desc" content is not right under my title in the banner? I have posted my CSS and HTML code. I have also posted the photo of how the outcome looks.

 #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

You can float your image left instead of making it an inline-block element. Also there'd be no need to make the paragraph an inline-block either.

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

Answer 2

Surely it is because you have:

#desc {
  margin-left: 190px;
}

... which means the box isn't fitting under the title, so it is getting shunted underneath. Either way, float the image left and don't have margin-left.

Answer 3

try this:

<div id="bannerBottom">

 <div class="container-banner-img">
  <img id="bannerImg" src="http://www.placehold.it/100x100">
 </div>

 <div class="container-banner-content">
<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>

</div>

CSS

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

.container-banner-img {
  float: left; /* <- pay attention on this line */
  width:25%;
  }

  .container-banner-content{
    width: 70%;
  }
}

Answer 4

If you don't want to go the flexbox route you can float the image and keep your heading and description block level.

I took a few liberties with the markup and CSS selectors, changing them from IDs to classes and other improvements to streamline everything.

 .entry { font-family: Arial, sans-serif; border: 5px solid #0087dd; margin: 30px 0; } .entry-img { float: left; max-width: 150px; margin: 10px; } .entry-title { font-size: 20px; color: steelblue; } .entry-desc { margin: 10px; } 

 <div class="entry"> <img class="entry-img" src="http://www.placehold.it/100x100"> <h2 class="entry-title">The Big 3 - HTML, CSS, JavaScript</h2> <p class="entry-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>