html - CSS:在段落中穿插图像

Question

我有可变数量的段落，我想在它们之间穿插图像。我不能将它们散布在代码本身中。这些段落是作为一个 block 给我的。

我在这里创建了一个 jsfiddle:http://jsfiddle.net/4VvVL/1/ ，但不确定如何执行此操作。我做不到:

<img>
<p>...</p><p>...</p>
<img>
<p>...</p><p>...</p>
<img>
<p>...</p><p>...</p>

但必须将段落放在一个 block 中:

<img><img><img>
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>

有什么想法吗？我可以用代码(js 或其他方式)完成，但我想知道是否有 CSS 解决方案。

Answer 1

如果你不关心它们实际上是img标签，你也不关心旧的浏览器，那么就可以做到。参见 http://jsfiddle.net/4VvVL/10/和 http://jsfiddle.net/4VvVL/9/ .

这是否适用于 javascript 可能值得怀疑，但这由您决定。

想法是使用 :before 伪元素为背景图像创建一个显示位置，然后使用 :first-child 作为基础“count"来自相邻的兄弟选择器。对于支持它的浏览器，:nth-child 选择器甚至更好。参见 http://jsfiddle.net/4VvVL/11/ .