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

时间:2021-12-19 12:05:14

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


24  

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


3  

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


0  

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

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

vertical-align:baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

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


24  

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


3  

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


0  

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

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

vertical-align:baseline | length | sub | super | top | text-top | middle | bottom | text-bottom | initial | inherit;

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.

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