将图像放在h1旁边

Question

如何将图像放在h1文本旁边?左边是图片，右边是文字。提前感谢!

img {
width: 150px;
height: 150px;
}
h1 {
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}

<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>

Answer 1

使用flexx来解决这个布局问题可能是最有效的。添加display: flex;的父元素将创建您正在寻找的行布局，如果需要，一些额外的CSS属性将使子元素居中。在这里查看完整的指南，如果需要，可以真正控制每个元素的位置。

.head {
display: flex;
justify-content: center;
}
img {
width: 150px;
height: auto;
max-width: 100%;
}
h1 {
padding: 25px;
border: 0;
margin: 0;
align-self: center;
}

<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>
</header>

Answer 2

将float: right添加到h1:

img {
width: 150px;
height: 150px;
}
h1 {
float: right;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}

<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>

Ordisplay: inline-blocktoh1:

img {
width: 150px;
height: 150px;
}
h1 {
display: inline-block;
padding: 25px;
border: 0px;
margin: 0px;
height: 30%;
width: 70%;
}

<header class="head">
<img src="https://static.nike.com/a/images/f_jpg,q_auto:eco/61b4738b-e1e1-4786-8f6c-26aa0008e80b/swoosh-logo-black.png" class="pic">
<h1 class="home" id="home">Hi</h1>

请记住，图像具有固定宽度，而文本具有相对宽度，因此如果超过总宽度允许值，它将自动流向下一行。为了防止这种情况，只需在h1上设置width: fit content。