Html CSS3：如何将内容放在第二列的顶部？

我有一个固定宽度和高度的两列文本布局，用

-{moz，webkit}-column-*

东西实现（即文本从一列自由流动到另一列）

如何将图像放置在第二列的顶部，与右侧对齐（即文本的外部边框），以便列中的文本围绕该图像流动

---

JS还可以（但我更愿意不用它）。应至少在最新的Chrome和最新的FF中工作。移动Safari是可取的。

看看css3规范，它可能会有所帮助

这确实很棘手，即使使用JS，我也无法想出最佳解决方案。无论如何，正如Last Rose Studio所说，您可以使用图像上的column break属性强制图像始终位于第二列的顶部，如所示。然而，这只是webkit的一个有效解决方案，因为firefox还不支持

分栏

属性afaik

考虑到这一点以及布局具有固定的宽度和高度这一事实，我认为最好的解决方案是只使用两个div作为列，如中所示。这不是一个完美的解决方案，但我认为多列布局不足以满足您的需求，至少目前是这样

编辑：

---

如果您将文本划分为段落，您可以使它们从一列流向下一列，就像使用jQuery一样，基于。

谢谢，但问题是-将图像框放在哪里？我想JS代码应该把它放在正确的位置，但是应该放在哪里呢。另请参见对另一个问题的评论。FF有一个解决方法（至少对于防止拆分，这在这里可能已经足够了）：FF不支持

列中断

，但是它不会分割

内联块

元素。关于使用两个div：在这种情况下，任何现成的代码都可以使文本流动？我担心FF解决方案在这里不会有用，因为它不会使图像“跳转”到下一列。我想不出任何非JS的方法来实现这一点，但是如果你把文本分成段落，你可以让它们从一列流向下一列，就像使用jQuery一样，基于。我不知道它是否适合你的需要，因为这可能不是你想要的答案，但我想这是我能得到的最接近的答案：像我需要的一样。请在你的回答中加入这一点，这样我就可以接受了。