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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我希望文本和图像相邻,但我希望图像位于屏幕的最左边,我希望文本位于屏幕的最右边。

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

我该怎么做?

谢谢

提问于
用户回答回答于

你想用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的基础知识,将所有样式分割成一个单独的样式表,然后使用类。将来会对你有帮助的。

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;
}
用户回答回答于
img {
    float:left;
}
h3 {
    float:right;
}

请注意,你可能希望使用clear:both在你提供的代码之后出现的任何元素,这样它就不会直接在浮动元素下面滑动。

扫码关注云+社区