Question

我正在使用css编辑页面内容（注意：我无法编辑HTML代码）。

我有2列div1，div2。每列有几个子项（包含文本）。如果块具有2行或更多行文本，则所有连续内容将自动向下移动。

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

我该如何解决这个问题？

<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中做到这一点。（有时你可以根据自己的情况，但只有涉及绝对定位的糟糕黑客等等。）

CSS 3有columns，但是除了IE之外，所有现代浏览器都支持~~得不到支持~~。

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

Answer 2

在HTML / CSS中是不可能的，我想不出任何允许它的布局引擎。你的愿望是如此奇怪，你可能需要重新考虑。即使您设法使其成为可能，您的读者也可能会误解结果。

元素定位的规则在各地或多或少都相同。当元素定位自身时，它可以用作框架：页面，列，父级（或其父级之一），当前位置（前一个兄弟），就是这样。每个内容的和平要么位于文档的自身部分，要么在那里找到它的位置，要么完全离开并且相对于页面的位置。布局中没有移民。

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

2 个答案: