如何将HTML图片/文本放在div的同一行上？

我一直在使用HTML/CSS约2周。如何将HTML图片/文本放在div的同一行上？

我无法让我的site上的文字坐在小狗缩图旁边，而不是在它下面。

如果我浮动文本和图片，他们并排，但文本是第一，而不是图片。为什么会这样？该文本在HTML中的图片之后出现。

这里是JSFiddle。我以前从未使用过JSF，所以我希望我做的正确。我不知道为什么JSF中的图片不工作（外部链接的（小狗））。

http://jsfiddle.net/nhv54/

来源

2012-07-24 user1472747

当排队的图像和文本，我喜欢使用内联或内联块元素，而不是把它们的块元件的内部。 Here is an example特别适合你的情况。

的Html

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

来源

2012-07-24 21:16:56 BumbleB2na

即图像的URL是404，您可能需要修改/使用HTTPS更新你的答案/提琴：// PLACEHOLD .it /图像 - 即：http://placehold.it/20x20 – 2016-12-30 22:07:06

检查了这一点 http://jsfiddle.net/nhv54/3/

相近的CSS注意到

.pull-left * { 
     float: left;  
}

而且每个div的，你要的内容在一行上应该有一流“左拉“

<div class = "ProjectsModules pull-left" id = "example1"> 
    <img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy    .jpg"/> 
    <div id = "ProjectsModulesText"> 
    <h1> Jim </h1> 
    <p> 
     stuff 
    </p> 
    </div> 
</div>

来源

2012-07-24 21:17:19 iamruss

该图像的URL是一个404.你可能想要修改/更新你的答案/提琴使用https://placehold.it/图像 - 即：http： //placehold.it/20x20 – 2016-12-30 22:07:13

您还可以设置vertical-align: middle;您的文本在里面的任何标签，大概是p。

来源

2012-07-24 21:18:57 dezman

你可以使用内嵌块

我更新您的jsfiddle

http://jsfiddle.net/nhv54/16/

来源

2012-07-24 21:26:02 Theorian