Html 如何复制代码块，使其显示在图像的唯一保留位置下方

小提琴在这儿

我想重复下面的代码块，只有第二个代码块的右边有图像。本以为很简单，但却遇到了困难

<div class="wrap">
    <div id="block1"
    <p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic" ></p>
    <h2 id="intro">
        The best selection of cheese I've ever seen! Cannot wait for our next order!
    </h2>
</div>

    <div id="block2"
    <p><img src="img/cheese1.jpg" alt="Cheese Picture" id="intro_pic2" ></p>
    <h2 id="intro2">
        The best selection of cheese I've ever seen! Cannot wait for our next order!
    </h2>
</div>

我认为您需要以下内容：

<div class="ex1">
    <img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg" alt="Cheese Picture">
    <h2>The best selection of cheese I've ever seen! Cannot wait for our next order!</h2>
</div>

请参见演示：

我稍微简化了HTML。图像根据需要向右浮动，如果足够长，文本将围绕图像流动

我调整了一些填充和边距，以获得更紧凑的外观

我还设置了示例2，演示如何将文本定位为图像下方的标题

示例2的CSS如下所示：

.ex2{
边框：1px点浅蓝色；
宽度：200px；
}
.ex2 img{
显示：块；
宽度：100%；
}
.ex2 h2{
保证金：0；
字号：1.5em；
线高：1.25；
字母间距：-1px；
颜色：2B9BD4；
}

设置包装器元素的宽度，并缩放图像以适合。标题将填充父级的宽度，并位于图像下方。
是否希望
h2
标题与图像宽度相同，并像标题一样合适？让我看看。。。。给我15分钟。嗨，马克，这是我想用的一个例子，基本上就像你在fiddle中一样，只在下面的一行重复。我更新了fiddle，整个块可以根据需要重复。
<div class="ex1">
    <img src="http://s15.postimg.org/vl0o8vobf/cheese_owner.jpg" alt="Cheese Picture">
    <h2>The best selection of cheese I've ever seen! Cannot wait for our next order!</h2>
</div>