Html 如何控制图像在div/CSS中的位置？_Html_Css_Positioning_Divider

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

html css

Html 如何控制图像在div/CSS中的位置？,html,css,positioning,divider,Html,Css,Positioning,Divider,我目前正在尝试自学HTML。现在我正在创建一个网站，只是为了美观，我在CSS/div方面遇到了问题。现在看起来像是。如果没有h1，它实际上就停留在文本的右边。我的代码如下所示： <!Doctype html> <html> <title>Lovey Lovey</title> <head> <link rel="shortcut icon" href="https://www.emoji.co.uk/files/phan

我目前正在尝试自学HTML。现在我正在创建一个网站，只是为了美观，我在CSS/div方面遇到了问题。现在看起来像是。如果没有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" >

@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中遗漏了一些东西，但我不能完全确定。我很感激你们的意见

您可以这样给出IMG和ID：

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

我不确定这些维度是否有效，但请随意使用，您将把它们放在它们应该放在的位置。

将下面的内容添加到Css中

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

并将Id添加到内部的HTML中

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

请检查下面附带的图像。如果这是您希望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”样式，因为它是块级元素，占据了整个视口宽度。下面的CSS肯定会帮助您进行最少的编辑：

.header h1 {display:inline-block;}

同时移除机翼

左侧

和

右侧

的浮动

另一种方法是添加此CSS：

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

希望这对你有帮助

我删除了您的HTML中的所有杂乱内容，正如我在评论中所建议的那样

正文{
背景：url（“https://media.giphy.com/media/elf1s7iKPGXks/giphy.gif）#ffb3ff右重复；
文本对齐：居中；
}
.左，.右{
浮动：左；
宽度：100px；
高度：100px；
}
.对{
浮动：对；
}
h1{
显示：内联；
}
标题，
页脚{
背景图像：url（'https://vignette.wikia.nocookie.net/animal-jam-clans-1/images/a/a3/Tumblr_static_971v84xme8g888gwwow800cc0.gif');
背景尺寸：75px 75px；
背景重复：重复-x；
高度：75px；
}


爱的爱
我爱你！
太爱你了！

由于您仍在学习HTML，我建议您使用CSS作为间距，而不是使用多个

br

标记。这将产生一个更可读的HTML文件。此外，

标题

标签应位于

标题

标签内。

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