[英]HTML CSS Banner Alignment
有人可以帮我一下,为什么我的“ 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>
您可以向左浮动图像,而不是使其成为嵌入式块元素。 同样,也无需将段落设为内联块。
#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>
肯定是因为您有:
#desc {
margin-left: 190px;
}
...这表示该框在标题下不适合,因此它在下面被分流了。 无论哪种方式,请向左浮动图像,并且不向左留边距。
尝试这个:
<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%;
}
}
如果您不想使用flexbox
路线,则可以浮动图像并保持标题和描述块水平。
我对标记和CSS选择器采取了一些自由措施,将它们从ID更改为类,并进行了其他改进以简化所有操作。
.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.