与h1和p的文本旁边的图像

Question

我正在创建一个网站，我正在尝试在图像旁边对齐文字。这听起来很容易，但出于某种原因，我似乎无法得到它。

以下是我试图让图片和文字显示的图片：

到目前为止，我已尝试过以下HTML：

<div class="example">
    <div class="eg1">
        <img src="eg1.gif" />
        <h2>Example 1</h2>
        <p>This is an example</p>
    </div>
    <div class="eg2">
        <img src="eg2.gif" />
        <h2>Example 2</h2>
        <p>This is another example</p>
    </div>
</div>

和CSS：

.example {
    display: inline-block;  
}

.eg1, .eg2 > img {
    float: left;
}

.eg1, .eg2 > h2 {
    float: left;
}

.eg1, .eg2 > p {
    float: left;
}

此刻显得一团糟。它们出现在彼此之下，文本显示在图像的错误一侧。

实现这一目标的最佳方法是什么？

Answer 1

可能是这样的吗？

<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>
<div class="block">
    <figure><img src="http://lorempixel.com/100/100/" alt=""></figure>
    <h1 class="title">the title here</h1>
    <p class="excerpt">the text goes here</p>
</div>

http://jsfiddle.net/g57bB/7/

Answer 2

我最近在这样的网站上设置了导航。关键是将图像设置为背景并使用center left no-repeat将其偏移虽然它采用ul和li格式，但我使用此格式的CSS ：

CSS

li a {
  font-size:20px;
  color:#f6f9db;
  padding-left:75px;
  background:url(icon-up.png) center left no-repeat;
  text-decoration:none;
  line-height:30px;
  text-shadow: -2px 2px 1px #551508;
}

li a:hover {
  color:#551508;
  display:inline-block;
  padding-left:75px;
  background:url(icon.png) center left no-repeat;
  text-shadow: -1px 1px 0px #f6f9db;
  }