如何将HTML图片/文本放在div的同一行上? [英] How to put HTML picture / text on the same line in a div?

问题描述

我已经使用HTML/CSS大约2周了.

I've been using HTML/CSS for ~2 weeks now.

我在将网站上的文本放在小狗旁边时遇到麻烦缩略图，而不是在缩略图下方.

I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.

如果我同时浮动文本和图片，则它们是并排的，但是文本是第一位的，而不是图片.为什么会这样呢?文本在HTML图片之后出现.

If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.

这里是JSFiddle.我以前从未使用过JSF，所以希望我能正确使用它.我不知道为什么JSF中的图片不起作用(外部链接(小狗)).

Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).

http://jsfiddle.net/nhv54/

推荐答案

在排列图像和文本时，我喜欢使用内联或内联块元素，而不是将它们放入块元素中. 这里是一个示例，它特别适合您的情况.

When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.

HTML

<p>
    Vertically centered text
    <img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>​

这篇关于如何将HTML图片/文本放在div的同一行上?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！