如何在 CSS 中控制图像在 div/ 中的位置？答案

【问题标题】：How do I control the positioning of an image in a div/ in CSS?如何在 CSS 中控制图像在 div/ 中的位置？
【发布时间】：2018-10-19 03:19:40
【问题描述】：

我目前正在尝试自学 HTML。现在我正在创建一个网站只是为了审美目的，我在 CSS/div 上遇到了麻烦。目前它看起来像this。如果没有 h1，它实际上就在文本旁边。我的代码如下所示：

<!Doctype html>
<html>


<title>Lovey Lovey</title>


<head>

<link rel="shortcut icon" href="https://www.emoji.co.uk/files/phantom-open-emojis/symbols-phantom/12944-sparkling-heart.png" />

    <link rel= "stylesheet" type="text/css" href="love.css">

<style type="text/css">


body {background: url("https://media.giphy.com/media/elf1s7iKPGXks/giphy.gif") #ffb3ff right repeat; }

</style>

</head>


<body> 

<center>

<img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > 

<br>
<br>


<div class = "header">
<img src= https://i.imgur.com/7Xjrk3X.gif alt= "Left" style= "height:75px; width:75px; float:left;"> 


 <h1>I love you!</h1>

<img src= https://i.imgur.com/CQl7GZu.gif alt= "Right" style= "float:right; height:75px; width:75px;">

</div>

<br>

<h2><i>Love you so much!</i></h2>

<br>
<br>
<br>

<img src = https://i.imgur.com/HCwaPsi.gif height="170" width="140"  />

<br>
<br>

<img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" > <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif/revision/latest?cb=20171010223602 height= "75" width= "75"> <img src= https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif height= "75" width= "75" >

最后我的 CSS 看起来像这样：

@charset "utf-8";
/* CSS Document */

.header Left {
  float: left;
  width: 100px;
  height: 100px;
  background: #555;
}

.header Right {
  float: right;
  width: 100px;
  height: 100px;
  background: #555;
}

.header h1 {
  position: relative;
  top: 18px;
  left: 10px;
}

基本上，我要做的是在“我爱你！”旁边添加翅膀。同时仍然让文本很大。我觉得我真的在 CSS 中遗漏了一些东西，但我并不完全确定。我很感激你们可能有任何意见！

【问题讨论】：

因为你还在学习 HTML，我建议使用 CSS 来代替多个 br 标签。这将产生一个更具可读性的 HTML 文件。 title 标签也应该放在 head 标签内。

标签： html css positioning divider

【解决方案1】：

您可以像这样同时提供 imgs 和 ID：

<img src="..." id="left-wing" />
<img src="..." id="right-wing" />

对于 css：

img#left-wing {
    position: absolute;
    top: 50vh;
    left: 40vh;
}

img#right-wing {
    position: absolute;
    top: 50vh;
    left: 60vh;
}

我不确定这些尺寸是否会起作用，但请尝试一下，然后您会将它们放在应有的位置。

【讨论】：

【解决方案2】：

在Css下面添加

  img#left {
    position: absolute;
    top: 45vh;
    left: 110vh;
           }
   img#right {
    position: absolute;
    top: 45vh;
    left: 60vh;
}

并在 HTML 中添加 ID

<img id="right">
<img id="left">

【讨论】：

【解决方案3】：

h1 是一个块级元素，它占据整个视口宽度。下面的 CSS 肯定会帮助您进行最少的编辑：

.header h1 {display:inline-block;}

同时删除机翼 left 和 right 的浮动。

另一种方法是添加这个 CSS：

.header { display:table; }
.header *{ display:table-cell; }

希望对您有所帮助！

【讨论】：

【解决方案4】：

我按照评论中的建议删除了您 HTML 中的所有杂乱。

body {
  background: url("https://media.giphy.com/media/elf1s7iKPGXks/giphy.gif") #ffb3ff right repeat;
  text-align: center;
}

.left, .right {
  float: left;
  width: 100px;
  height: 100px;
}

.right {
  float: right;
}

h1 {
  display: inline;
}

header,
footer {
  background-image: url('https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif');
  background-size: 75px 75px;
  background-repeat: repeat-x;
  height: 75px;
}

<!Doctype html>
<html>

  <head>
    <title>Lovey Lovey</title>

    <link rel="shortcut icon" href="https://www.emoji.co.uk/files/phantom-open-emojis/symbols-phantom/12944-sparkling-heart.png" />
  </head>


  <body>

    <header></header>

    <main>
      <img src=https://i.imgur.com/7Xjrk3X.gif alt="Left" class="left">

      <h1>I love you!</h1>

      <img src=https://i.imgur.com/CQl7GZu.gif alt="Right" class="right">

      <h2>Love you so much!</h2>

      <img src=https://i.imgur.com/HCwaPsi.gif height="170" width="140" />
    </main>

    <footer></footer>

  </body>

</html>

我只是在这个例子中没有定位页脚，所以你可以自己做。它现在就像您在问题中使用的那样，但会想象您希望将它放在视口的底部。

【讨论】：

【解决方案5】：

请检查下面附上的图片。如果这是您希望您的 html 页面的方式，那么以下步骤将有所帮助

只需像这样更改您的代码：

<div class = "header">
<img src= https://i.imgur.com/7Xjrk3X.gif style= "height:75px; 
width:75px; float:left;"> 


<img src= https://i.imgur.com/CQl7GZu.gif  style= "float:right; 
height:75px; width:75px;">

</div>

<br>

<h1>I Love You</h1>

<br>
<br>
<br>

<h2><i>Love You So Much</i></h2>

同时从 css 部分中删除 'header h1' 样式

【讨论】：