Question

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

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

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

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

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

Answer 2

检查一下 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>

Answer 3

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

Answer 4

您可以使用内联块

我更新了你的JSFIDDLE

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

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

4 个答案: