我有一个div。宽100%,高150像素。我在其中嵌套了git commit repo B dir
git push
标记,它位于图像下而不是旁边。
<h1>
CSS:
<body>
<div class='topbar'>
<img src='img source is here'/>
<h1>
GO COSMOS!!!
</h1>
</div>
</body>
答案 0 :(得分:4)
标题(<h1>
,<h2>
等)是块级元素:
块级元素占据其父元素(容器)的整个空间,从而创建“块”。本文有助于解释这意味着什么。 Source: MDN Docs
只需显示h1 inline-block
,如:
h1 {
display: inline-block;
vertical-align:top;
/*vertical-align aligns it at the top of the image, instead of the baseline*/
}
答案 1 :(得分:1)
另一种选择是将两个内部元素浮动。请参阅小提琴:https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/
img {
float: left;
height: 150px;
width: 150px;
}
h1 {
float: left;
}
答案 2 :(得分:0)
默认情况下,所有标头标签均为block
,这意味着它的宽度为100%。如果您想要并排另一个元素,则需要更改display
,如下所示:
h1 {
display: inline;
}