CSS: как переместить элемент из одного столбца в другой без изменения HTML?

Question

Я использую css для редактирования содержимого страницы (NB. Я не могу редактировать HTML-код).

У меня есть 2 столбца div1, div2.Каждый столбец имеет несколько дочерних элементов (содержащих текст).Если блок содержит 2 или более строк текста, все последующие материалы автоматически перемещаются вниз.

Мне нужно переместить детей из первого столбца во второй, посередине.Я собирался использовать абсолютное позиционирование, но потом понял, что дети больше не двигаются вниз, когда количество строк текста увеличивается.

Как мне решить эту проблему?

<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

Это невозможно в HTML / CSS, и я не могу представить ни один механизм верстки, который бы позволял это. Ваше желание настолько странно, что вам, возможно, придется переосмыслить это. Ваши читатели могут неправильно понять результат, даже если вам удастся сделать это возможным.

Правила позиционирования элементов более или менее одинаковы везде. Когда элемент позиционирует себя, он может использовать в качестве основы: страницу, столбец, родитель (или один из его родителей), текущую позицию (предыдущий брат и сестра) и все. Каждый блок контента либо находится в своей части документа и находит там свое место, либо оставляет целиком и позиции относительно страницы. В макете нет эмиграции.

Answer 2

Вы не можете сделать это в чистом CSS 2. (Ну, иногда вы можете, в зависимости от вашего сценария, но только с ужасными взломами, включающими абсолютное позиционирование и тому подобное.)

CSS 3 имеет столбцы , но они недостаточно широко поддерживаются, пока поддерживается всеми современными браузерами, кроме IE.

Существует несколько попыток на основе jQuery, таких как эта , которые добавляют функциональность столбцов, но, конечно, им требуется JavaScript.