html - CSS3 : how to put something at the top of second column?

Question

我有一个固定宽度和高度的两列文本布局，用 -{moz,webkit}-column-* 东西实现(即文本从一列自由流动到另一列)。

如何将图像放在第二列的顶部，并向右对齐(即文本的外边框)，以便列中的文本环绕该图像？

JS 可以(但我宁愿不用它)。至少应该在最新的 Chrome 和最新的 FF 中工作。 Mobile Safari 是可取的。

Answer 1

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

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

编辑:

如果您将文本分成段落，您可以让它们从一栏流到下一栏，就像 this fiddle 中那样。使用 jQuery，基于 this SO answer .