1

我想通过围绕文本操纵图片来在我的文章中注入更多的创造力，到目前为止，我一直在使用 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 和 CSS 来控制图像之间的垂直间距（实际上是 div - 以某种方式让文本可以填充图像之间的垂直间距）但没有骰子。

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

在此处输入图像描述

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

ps：如果 HTML & CSS 无能为力，也欢迎任何 PHP 或 Jquery 函数。谢谢！

4

2 回答 2

2

你尝试过这样的事情吗？

<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/

于 2013-07-31T10:58:02.837 回答
0

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

<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 的例子，但是如果你没有足够的文本，你最终会出现很大的休息并且段落之间没有连续性。

于 2013-07-31T11:00:09.657 回答