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

【问题标题】：How to put HTML picture / text on the same line in a div?如何将 HTML 图片/文本放在 div 的同一行？
【发布时间】：2012-07-24 21:13:16
【问题描述】：

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

我无法将我的 site 上的文本放在小狗缩略图旁边，而不是在它下方。

如果我同时浮动文字和图片，它们是并排的，但文字在前，而不是图片。为什么会这样？文本位于 HTML 中的图片之后。

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

http://jsfiddle.net/nhv54/

【问题讨论】：

标签： html css templates layout

【解决方案1】：

在排列图像和文本时，我喜欢使用内联或内联块元素，而不是将它们放在块元素中。 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>

【讨论】：

该图像 url 是 404。您可能希望使用 placehold.it 图像修改/更新您的答案/小提琴 - 即：placehold.it/20x20

【解决方案2】：

看看这个 http://jsfiddle.net/nhv54/3/

CSS 中的注意事项

.pull-left * {
         float: left;    
}

您希望内容位于一行的每个 div 都应具有“pull-left”类

<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>

【讨论】：

该图像 url 是 404。您可能希望使用 placehold.it 图像修改/更新您的答案/小提琴 - 即：placehold.it/20x20

【解决方案3】：

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

【讨论】：

【解决方案4】：

你可以使用内联块

我更新了你的 JSFIDDLE

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

【讨论】：