Позиция div box в конце после следующих элементов

Если у меня есть 3 коробки Div (любое число действительно), упорядоченное в следующей усадьбе:

<div>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

Как сделать div с id one отображаемым после div с id three без изменения структуры html?

Это то, что html должно отображаться как:

________________________
| ____________________ |
| | id=two           | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=three         | |
| |                  | |
| |__________________| |
| ____________________ |
| | id=one           | |
| |                  | |
| |__________________| |
|______________________|

Ответ 1

Это возможно в зависимости от того, что происходит после этих div. Если там ничего нет, вы можете использовать position: absolute; top: 100%; в первом div для достижения этого:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

#container { position: relative; border: 1px solid red; }
#one { position: absolute; top: 100%; }
#one, #two, #three { width: 300px; height: 200px; border: 1px solid #ccc; }

http://jsfiddle.net/xjnrE/

Однако, если что-либо после #container div, оно будет находиться под #one (по крайней мере частично, в зависимости от высоты, см. demo).

Имейте в виду, что если элемент "находится в потоке" (т.е. он не позиционируется и не плавает), он будет отображаться в соответствии с порядком появления на разметке (и, следовательно, DOM). Это означает, что вы должны прибегнуть к JavaScript для изменения фактического положения элемента в DOM:

var container = document.getElementById('container');
var one = document.getElementById('one');
container.appendChild(one);

http://jsfiddle.net/xjnrE/3/

Ответ 2

Если вы контролируете размеры разделов и уверены, что их содержимое не сломает ваш макет, вы можете разместить их с помощью css. Немного неудобно, но что-то вроде:

#one, #two, #three {
   position: absolute;
   width: 200px;
   height: 200px;
}
#one {
   top: 400px;
}
#two {
   top: 0px;
}
#three {
   top: 200px;
}

Эти позиции могут быть изменены с помощью javascript, если вам нужно.

Ответ 3

Далее возьмите первый DIV и переместите его как последний элемент в родительском контейнере.

Тем не менее, вам нужно будет убедиться, что вы каким-то образом настроите контейнер DIV. Поэтому, если вы не можете редактировать HTML, нарисуйте элемент на основе какого-либо другого родительского элемента с уникальным идентификатором или классом.

Разметка:

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
</div>

JavaScript:

$('#container #one').appendTo('#container');

Ответ 4

FTR: flexbox поддержка созрела с тех пор, предлагая чистое решение.

/* That all: */
#container { display: flex; flex-direction: column; /* omit the latter for horiz. stacking */ }
#one { order: 99999; /* Alas, no "last"... */ }

/* Demo visuals only: */
#one { background: pink; }
#container > div { width: 100px; height: 100px; border: 1px solid grey; }

<div id="container">
    <div id="one"> FIRST </div>
    <div id="two"> second </div>
    <div id="three"> third </div>
</div>