CSS:如何在不更改 html 的情况下将元素从一列移动到另一列？

Question

我正在使用 css 来编辑页面的内容(注意。我无法编辑 html 代码)。

我有 2 列 div1、div2。 每列都有几个子列(包含文本)。如果该 block 有 2 行或更多行文本，所有连续的内容都会自动向下移动。

我需要将一个 child 从第一列移动到第二列，在中间。我正在考虑使用绝对定位，但后来我意识到随着文本行数的增加， child 不再向下移动。

我该如何解决这个问题？

<div id=div1>
  <div> blabla </div>
  <div> blabla </div>
  <div> blabla </div>
</div>

<div id=div2>
  <div> blabla </div>
  <div> blabla </div>
  <div> blabla </div>
</div>

谢谢

Answer 1

你不能在纯 CSS 2 中做到这一点。(有时你可以，这取决于你的场景，但只有涉及绝对定位等可怕的 hack。)

CSS 3 有 columns但它们还没有得到足够广泛的支持除 IE 之外的所有现代浏览器都支持。

有几种基于 jQuery 的尝试，例如 this one添加列功能，但当然，它们需要启用 JavaScript。