如何将图片放在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>
2条答案
按热度按时间e0bqpujr1#
使用flexbox来解决这个布局问题可能是最有效的。添加 * display:flex;* 到父元素将创建您正在寻找的行布局,如果需要,一些附加的CSS属性将使子元素居中。如果需要,请查看完整的指南here以真正控制每个元素的位置。
laximzn52#
将
float: right
添加到h1
:或
display: inline-block
至h1
:一个二个一个一个
请记住,图像有固定宽度,文本有相对宽度,因此如果超出总宽度允许值,文本将自动流动到下一行。要防止这种情况,只需在
h1
上设置width: fit content
。