如何在HTML中将文本和图像放在一起？

Question

我希望文本和图像彼此相邻,但我希望图像位于屏幕的最左侧,我希望文本位于屏幕的最右侧.这就是我现在拥有的......

<body>
<img src="website_art.png" height= "75" width= "235"/>
<h3><font face="Verdana">The Art of Gaming</font></h3>
</body>

我怎样才能做到这一点？

谢谢

Answer 1

img {
    float:left;
}
h3 {
    float:right;
}

请注意,您可能希望clear:both在所提供的代码之后的任何元素上使用该样式,以便它不会直接在浮动元素下方向上滑动.

Answer 2

您要为此使用css float，可以将其直接放在代码中。

<body>
<img src="website_art.png" height= "75" width="235" style="float:left;"/>
<h3 style="float:right;">The Art of Gaming</h3>
</body>

但我真的建议您学习CSS的基础知识，并将所有样式拆分为单独的样式表，并使用类。它将对您将来有所帮助。一个不错的起点是w3schools，或者可能是后来的Mozzila Dev。网络（MDN）。

HTML：

<body>
  <img src="website_art.png" class="myImage"/>
  <h3 class="heading">The Art of Gaming</h3>
</body>

CSS：

.myImage {
  float: left;
  height: 75px;
  width: 235px;
  font-family: Veranda;
}
.heading {
  float:right;
}