如何在 HTML 中将文本和图像彼此相邻放置？答案

【问题标题】：How to place Text and an Image next to each other in HTML?如何在 HTML 中将文本和图像彼此相邻放置？
【发布时间】：2013-06-17 16:06:09
【问题描述】：

我希望文本和图像彼此相邻，但我希望图像位于屏幕的最左侧，并且我希望文本位于屏幕的最右侧。这是我目前拥有的......

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

我该怎么做？

谢谢

【问题讨论】：

CSS: float: left; 和 float: right?
自 HTML5 起，<font> 标记已被删除。请删除它并用等效的 CSS 替换它；）
您可以使用 css 将它们放在 div 中，并使用适当的 float:right 或 left 将它们放在各自的两侧。可以设置 div 宽度以允许您拥有“最左边”和“最右边”的任何方式。

【解决方案1】：

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

请注意，您可能希望在您提供的代码之后的任何元素上使用样式clear:both，这样它就不会直接滑到浮动元素的下方。

【讨论】：

【解决方案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. Network (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;
}

【讨论】：

【解决方案3】：

您可以使用垂直对齐和浮动。

在大多数情况下，您希望垂直对齐：中间，图像。

对于middle，定义为：元素放置在父元素的中间。

因此您可能希望将其应用于元素中的所有元素。

【讨论】：