我想将img移动到徽标文本之前，使其具有响应性。我可以设法定位它，但当我调整页面大小时，它不会移动。
header {
top: 0;
left: 0;
right: 0;
min-width: 1600px;
}
.header-content {
display: inline-block;
display: fixed;
position: absolute;
align-items: center;
margin-top: 40px;
max-height: 58px;
height: 60px;
justify-content: space-between;
background-color: #220901;
width: 100%;
}
h1 {
color: #582F0E;
Font-Family: 'Cormorant Garamond', Serif;
text-align: center;
margin: 0;
}
p {
margin: 0;
padding: 0;
padding-left: 15px;
border: none;
Font-Family: 'Fira Sans', Sans-Serif;
Font-Size: 12px;
color: #c2c5aa;
text-align: center;
}
img {
max-height: 73px;
display: flex;
padding-left: 330px;
box-sizing: content-box;
padding-left: 400px;
}
h2 {
margin-top: 7px;
margin-bottom: 0;
margin-right: 4px;
padding-top: -10px;
text-align: center;
color: #BB4D00;
Font-Family: 'Cormorant Garamond', Serif;
}<section class="header-container">
<header>
<div class="header-content">
<h2 class="logo">Treat YourShelf Books</h2>
<p><i>A good book really hits the plot.</i> </p>
<img src="/img/logo2.png" alt="Treat YourShelf-BookStore Logo" />
</div>
</header>
</section>要使图像位于文本的顶部，只需将图像标记放在所需的图像标记的顶部，此外，代码中的许多内容不一定有目的，也不一定可以以更优化的方式完成(我评论了我认为没有必要的内容(。flex wrap属性将负责页面的响应，这意味着如果没有更多空间，元素将一个接一个地排列。晚上好，祝你学习顺利！
* {
margin: 0;
}
header {
//top: 0;
//left: 0;
//right: 0;
min-width: 1600px;
}
.header-content {
//display: inline-block;
display: flex;
//position: absolute;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
align-items: center;
margin-top: 40px;
//max-height: 80px;
//height: 80px;
//justify-content: space-between;
background-color: #220901;
width: 100%;
}
h1 {
color: #582F0E;
Font-Family: 'Cormorant Garamond', Serif;
text-align: center;
margin: 0;
}
p {
//margin: 0;
//padding: 0;
//padding-left: 15px;
border: none;
Font-Family: 'Fira Sans', Sans-Serif;
Font-Size: 12px;
color: #c2c5aa;
text-align: center;
}
img {
max-height: 73px;
//display: flex;
//padding-left: 330px;
//box-sizing: content-box;
//padding-left: 400px;
}
h2 {
//margin-top: 7px;
//margin-bottom: 0;
//margin-right: 4px;
//padding-top: -10px;
text-align: center;
color: #BB4D00;
Font-Family: 'Cormorant Garamond', Serif;
}<section /*class="header-container" */>
<header>
<div class="header-content">
<img src="/img/logo2.png" alt="Treat YourShelf-BookStore Logo" />
<h2 class="logo">Treat YourShelf Books</h2>
<p>A good book really hits the plot.</p>
<p>You can manually ajust the height or you can let the display flex do it for you .</p>
<p>no matter how many elements you add </p>
</div>
</header>
</section>.header-content {
display: flex
Flex: column
...
}
对于堆叠排列。。。