0

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

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

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

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

http://jsfiddle.net/nhv54/

4

4 回答 4

2

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>​
于 2012-07-24T21:16:56.570 回答
1

看看这个 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>
于 2012-07-24T21:17:19.367 回答
0

你可以使用内联块

我更新了你的 JSFIDDLE

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

于 2012-07-24T21:26:02.390 回答
0

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

于 2012-07-24T21:18:57.003 回答