Question

我有一个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>

Answer 1

标题（<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*/
 }

Answer 2

另一种选择是将两个内部元素浮动。请参阅小提琴：https://jsfiddle.net/DIRTY_SMITH/8gy5oprw/1/

 img {
   float: left;
   height: 150px;
   width: 150px;
 }

 h1 {
   float: left;
 }

Answer 3

默认情况下，所有标头标签均为block，这意味着它的宽度为100％。如果您想要并排另一个元素，则需要更改display，如下所示：

h1 {
    display: inline;
}