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

I want the text and the image to be next to each other but I want the image to be on the far left of the screen and I want the text to be on the far right of the screen. This is what I currently have....

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

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

How can I do this?

我怎样才能做到这一点？

Thanks

谢谢

3 个解决方案

#1

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

jsFiddle example

jsFiddle示例

Note that you will probably want to use the style clear:both on whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.

请注意，您可能希望使用样式清除：在您提供的代码之后的任何元素上，以便它不会直接在浮动元素下方向上滑动。

#2

You want to use css float for this, you can put it directly in your code.

你想为此使用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>

But I would really suggest learning the basics of css and splitting all your styling out to a separate style sheet, and use classes. It will help you in the future. A good place to start is w3schools or, perhaps later down the path, Mozzila Dev. Network (MDN).

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

HTML:

HTML：

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

CSS:

CSS：

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

#3

You can use vertical-align and floating.

您可以使用vertical-align和floating。

In most cases you want to vertical-align: middle, the image.

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

Here is a test: http://www.w3schools.com/cssref/tryit.asp?filename=trycss_vertical-align

这是一个测试：http：//www.w3schools.com/cssref/tryit.asp？filename = trycss_vertical-align

For middle, the definition is: The element is placed in the middle of the parent element.

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

So you might want to apply that to all elements within the element.

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

#1

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