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

问题描述 投票：1回答：5

我目前正在尝试自学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 positioning divider
5个回答
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;
}

我不确定这些尺寸是否会起作用，但是你可以将它们放在原来的位置。

0
投票

在下面添加到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">
0
投票

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

.header h1 {display:inline-block;}

同时移除翅膀left和right的浮子。

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

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

希望这对你有所帮助！

0
投票

我按照评论中的建议删除了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>

我只是没有在这个例子中放置页脚，所以这是你可以为自己做的事情。它现在就像你在你的问题中所拥有的一样，但是你会想象你想把它放在视口的底部。

0
投票

请查看下面的图片。如果这是您希望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'样式

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.