Учитывая, что HTML
<div>
<div id="content1"> content 1</div>
<div id="content2"> content 2</div>
<div id="content3"> content 3</div>
</div>
сделать как
content 1
content 2
content 3
Мой вопрос:
Есть ли способ сделать это, как показано ниже, используя CSS только без изменения части HTML.
content 1
content 3
content 2
Это может не соответствовать тому, что вам нужно, но посмотрите на этот вопрос:
CSS-позиционирование div над другим div, если не в этом порядке в HTML
В принципе, вам нужно будет использовать Javascript, чтобы он был надежным в любом случае.
Это можно сделать в браузерах, поддерживающих концепцию CSS3 flexbox, особенно свойство flexbox-order.
Смотрите здесь
Тем не менее, поддержка для этого только в текущих версиях большинства браузеров.
Изменить Время перемещается, а поддержка flexbox улучшается.
Это работает для меня: http://tanalin.com/en/articles/css-block-order/
Пример с этой страницы:
HTML
<div id="example">
<div id="block-1">First</div>
<div id="block-2">Second</div>
<div id="block-3">Third</div>
</div>
CSS
#example {display: table; width: 100%; }
#block-1 {display: table-footer-group; } /* Will be displayed at the bottom of the pseudo-table */
#block-2 {display: table-row-group; } /* Will be displayed in the middle */
#block-3 {display: table-header-group; } /* Will be displayed at the top */
Как указано там, это должно работать в большинстве браузеров. Проверьте ссылку для получения дополнительной информации.
Это один из классических вариантов использования для абсолютного позиционирования - для изменения рендеринга из исходного кода. Вы должны знать размеры divs, чтобы быть в состоянии сделать это надежно, однако, и если вы не используете javascript, это ваш единственный ресурс.
Я работал в Firefox 3 с Firebug и придумал следующее:
<div>
<div id="content_1" style="height: 40px; width: 40px; background-color: rgb(255, 0, 0); margin-bottom: 40px;">1</div>
<div id="content_2" style="width: 40px; height: 40px; background-color: rgb(0, 255, 0); float: left;">2</div>
<div id="content_3" style="width: 40px; height: 40px; background-color: rgb(0, 0, 255); margin-top: -40px;">3</div>
</div>
Это не идеально, так как вам нужно знать высоты каждого контейнера и применять это значение высоты к отрицательному верхнему краю последнего элемента и нижнему краю первого элемента.
Надеюсь, что это поможет, nd
Одно слово ответ: нет. Посмотрите на XSLT (XML Stylesheet Language Transforms), который является языком, специально предназначенным для манипулирования XML.
Я заработал, выполнив это:
#content2 { position:relative;top:15px; }
#content3 { position:relative; top:-17px; }
но имейте в виду, что это не сработает для вас, как только у вас будет динамический контент. Причина, по которой я опубликовал этот пример, заключается в том, что, не зная более конкретных вещей о вашем контенте, я не могу дать лучшего ответа. Однако этот подход должен указывать вам в правильном направлении относительно использования относительного позиционирования.
Если вы знаете высоту каждого элемента, то это простой случай вертикального относительного позиционирования для обмена вокруг заказов. Если вы не знаете высот, вам нужно либо дать им высоты, либо позволить divs получать полосы прокрутки, если есть переполнение или рассчитать все это с помощью JavaScript и добавить относительное позиционирование "на лету".
с jquery вы можете просто сделать:
$('#content2').insertAfter($('#content3'));
Я не думаю, что есть способ сделать это с помощью CSS, за исключением того, чтобы принудительно фиксировать позиционирование каждого из div и складывать их таким образом.