html - 带有 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/