如何在 HTML 中将文本和图像并排放置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17219757/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to place Text and an Image next to each other in HTML?
提问by user2426533
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
谢谢
回答by j08691
img {
float:left;
}
h3 {
float:right;
}
Note that you will probably want to use the style clear:bothon whatever elements comes after the code you provided so that it doesn't slide up directly beneath the floated elements.
请注意，您可能希望clear:both在您提供的代码之后出现的任何元素上使用该样式，以便它不会直接在浮动元素下方向上滑动。
回答by Dominic Green
You want to use css floatfor 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 w3schoolsor, 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;
}
回答by Illuminati
You can use vertical-align and 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;
垂直对齐：基线|长度|子|超|顶部|文本顶部|中间|底部|文本底部|初始|继承；
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.
因此，您可能希望将其应用于元素中的所有元素。
