div之间复杂的垂直间距用文本填充

Question

我希望通过在文本周围操纵图片来在我的文章中加入更多的创造力，而我到目前为止一直在使用HTML（并且通过CSS向左或向右浮动）以某种方式对文章进行“样式化”;

<div>
<div style="float:left;padding-right:10px;">image1.jpg</div>
<div style="float:left;padding-right:10px;">image2.jpg</div>
'.$article['text'].'
</div>

结果如下：

工作正常，但是......正如您所看到的，图像之间没有垂直间距，因此文章可以看起来更漂亮，更容易被读者理解。

我试图找到HTML＆amp; CSS来控制图像之间的垂直间距（div实际上 - 以某种方式使文本可以填充图像之间的垂直间距）但没有骰子。

无论如何，任何想法如何控制间距？我想要实现的是文章看起来像这样：

请注意，文章是由PHP动态创建的（不是通过WYSIWYG编辑器）所以我需要一些“自动”功能。 THX！

ps：如果HTML＆amp; CSS无能为力，任何PHP或Jquery函数也是受欢迎的。 THX！

Answer 1

你尝试过这样的事吗？

<div>
    <img src="image1.jpg" style="float:left; padding-right:10px;">

    FIRST PART OF TEXT

    <div style="clear: both;"></div>

    <img src="image2.jpg" style="float:left; padding-right:10px;">

    SECOND PART OF TEXT

</div>

无论如何你无法真正控制间距，但如果第一个文字足够长，它将进入两个图像之间的间隙。

这是小提琴：http://jsfiddle.net/NVyLX/1/

Answer 2

如果将文本拆分为单独的段落，则可以在它们之间浮动图像。 因此，您的代码必须更加顺畅：

<div>
    <div style="float:left;padding-right:10px;">image1.jpg</div>
    <p>Article part one...</p>
    <p>Article part two...</p>
    <div style="float:left;padding-right:10px;">image2.jpg</div>
    <p>Article part three...</p>
    <p>Article part four...</p>
</div>

如果您的零件足够长，他们会填补空白。否则，图像将保持在另一个之下。

如果你真的想休息一下，那么你可以使用<div style="clear: both;"></div>作为例子来自@MightyPork，但是如果你没有足够的文字，你最终将会有一个巨大的突破并且段落之间没有连续性。