css 尝试分离两种元素

3b6akqbq 于 2023-02-01 发布在其他

关注(0)|答案(1)|浏览(120)

我一直在尝试用CSS表单来分隔这两个元素。我希望img在页面的左上角，单词在右上角。我尝试为每个元素使用id，但由于它们都在第一个id之下，并且不允许我更改HTML代码，img和单词都向右移动或都向左移动。

#picture {
  margin: 0 auto;
}

#header {
  background-color: blue;
  text-align: right;
}

<div id="header">
  <div>
    <img id="picture" src="./img/bag.png" alt="notif">
    <h1>HELLO</h1>
  </div>
  <div>I am saying hello</div>
</div>

1条答案

使用float属性;

#picture {
  float: left;
}

#header {
  background-color: blue;
  text-align: right;
}

<div id="header">
  <div>
    <img id="picture" src="./img/bag.png" alt="notif">
    <h1>HELLO</h1>
  </div>
  <div>I am saying hello</div>
</div>