Question

我正在尝试将铅笔直接添加到“blah”下方，但看起来margin-top无效....

除此之外，尽管屏幕尺寸不同，我仍无法理解如何将铅笔直接放在“blah”下面。我被告知使用百分比解决了这个问题，这是正确的吗？

HTML：

  <head>
  <h1>Blah Pencil</h1>
  <img src = "http://www.pngall.com/wp-content/uploads/2016/03/Pencil-PNG-Pic.png" id = "pencil" height = "5%" width = "20%">
  </head>
  <link rel="stylesheet" type="text/css" href="pencil.css">
  <link href="https://fonts.googleapis.com/css?family=Fugaz+One|Roboto" rel="stylesheet">

  <body>

  </body>

</html>

CSS：

h1{
  text-align: center;
  font-family: 'Fugaz One', cursive;
  font-size: 590%;
}

body{
  background-image: url(https://www.xmple.com/wallpaper/graph-paper-grid-white-blue-1920x1080-c2-fdf5e6-1e90ff-l2-2-54-a-0-f-20.svg);
}

#pencil{
  display: inline-block;
  margin-top: 21px;
}

Answer 1

您可以在span中使用一个h1并将img放入其中，并使用relative/absolute和span上的位置img

＆＃13;

h1 {
  text-align: center;
  font-family: 'Fugaz One', cursive;
  font-size: 590%;
}

body {
  background-image: url(https://www.xmple.com/wallpaper/graph-paper-grid-white-blue-1920x1080-c2-fdf5e6-1e90ff-l2-2-54-a-0-f-20.svg);
}
span {
  position: relative;
}

h1 img {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

＆＃13;

<h1><span>Blah<img src="http://www.stabilo-promotion.com/download/C27ad4c3cX13ba9b553a7X2665/STABILO_Giant_5430K_ALL_STABILO_red_SPP_150dpi.png" id="pencil"></span> Pencil</h1>

<link rel="stylesheet" type="text/css" href="pencil.css">
<link href="https://fonts.googleapis.com/css?family=Fugaz+One|Roboto" rel="stylesheet">

＆＃13;

如何在文本标题下直接添加图像？

1 个答案: