pashkje

Поменять местами блоки <div> с помощью CSS

Recommended Posts

Извините, если создавали уже такие темы, но не нашел их здесь. Собственно есть два блока див. Допустим <div>первый блок</div> <div>второй блок</div>.

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

Share this post


Link to post
Share on other sites

1. Поменять их местами в html религия не позволяет?

2. Если высота статична и известна - http://jsfiddle.net/FXgCf/

3. Если высота не статична и не известна то с помощью javascript - http://jsfiddle.net/kQyvc/ ну или так http://jsfiddle.net/KnsYY/

Edited by wwt

Share this post


Link to post
Share on other sites

1.html - можно сказать религия не позволяет :blush:

2.Высота увы, но динамична.

3. JS еще не учил:(

Share this post


Link to post
Share on other sites

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

Share this post


Link to post
Share on other sites

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

В таком варианте http://jsfiddle.net/KnsYY/1/ неважно сколько блоков идет до или после передвигаемых, мы их меняем местами в дереве DOM.

Тоесть по сути это тоже самое что вы ручками исправите html код на вот это:


<div>2</div>
<div>1</div>
<div>3</div>

Edited by wwt

Share this post


Link to post
Share on other sites

А извращенцы могут сделать это средствами CSS: http://jsfiddle.net/dkdSu/

ну можно и так если забить на ie6-7.

Ну и мне не очень нравится клепать псевдотаблицы ))) Хотя решение очень даже не плохое.

Edited by wwt

Share this post


Link to post
Share on other sites

 

а не могли бы написать точно такую же функцию, но только для 3ёх блоков?

<div>1</div>

<div>2</div>

<div>3</div>

Надо чтобы 2 было вместо 1,и чтобы при измене блоков, 1ый блок не нализал на 3ий.

В таком варианте http://jsfiddle.net/KnsYY/1/ неважно сколько блоков идет до или после передвигаемых, мы их меняем местами в дереве DOM.

Тоесть по сути это тоже самое что вы ручками исправите html код на вот это:

<div>2</div><div>1</div><div>3</div>

 

Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса:

@media(max-width: 480px)

 

Заранее благодарю за ответ!

Share this post


Link to post
Share on other sites
Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса: @media(max-width: 480px)

 

Одиннадцатью минутами ранее нашёл способ (я в флексах просто не бум-бум) через CSS http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

Edited by antonKar

Share this post


Link to post
Share on other sites

 

Подскажите, пожалуйста, как сделать что бы данная функция выполнялась только для медиазапроса: @media(max-width: 480px)

 

Одиннадцатью минутами ранее нашёл способ (я в флексах просто не бум-бум) через CSS http://stackoverflow.com/questions/7425665/switching-the-order-of-block-elements-with-css

 

 

У меня иная ситуация))) Есть два блока - <main> и <aside>Я не могу эти блоки обернуть в еще один контейнер (издержки верстки под мою CMS). Вариант с функцией мне бы подошел.

Share this post


Link to post
Share on other sites

Тогда через js:

 

1) Объявляем переменную, в которой храним true или false (перевёрнуто или неперевёрнуто);

2) При генерации страницы и при ресайзе смотрим на переменную и на ширину страницы, и делаем (или не делаем) наши дела.

Share this post


Link to post
Share on other sites

1. Поменять их местами в html религия не позволяет?

2. Если высота статична и известна - http://jsfiddle.net/FXgCf/

3. Если высота не статична и не известна то с помощью javascript - http://jsfiddle.net/kQyvc/ну или так http://jsfiddle.net/KnsYY/

 

Подскажите, пожалуйста, если есть задача перемены очередности вывода блоков на странице при перезагрузке этой страницы, можно придумать похожий несложный скрипт?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,434
    Total Members
    3,128
    Most Online
    Sterben
    Newest Member
    Sterben
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если свойства нет в спецификации, то откуда его возьмет браузер? Даже если в каком то одном из браузеров введут это свойство то смысла его использовать все-равно не будет, так как в остальных оно работать не будет 🙂   Тогда бардак творился, DHTML, разные объектные модели и все дела. У netscape действительно была такая фича. Хотя не факт что она работала. Вот тут https://www.uv.es/jordi/v3/html/dynhtml/dynamic.pdf можно увидеть что float:center; присутствует в коде, но следом написано что элементы можно выровнять с помощью float слева или справа, или с помощью js по центру. Также в книге указаны допустимые значения для float - left, right, none. Так что это скорее всего была запланированная возможность, которая не получила реализации.
    • Если бы с html и css, все браузеры строго соответствовали спецификациям) Да статье около десятка лет, а то и более. Вот я тоже склоняюсь к тому, что это ошибка. но эта лекция была написана даже с учётом ещё живого на тот момент netscape navigator. Может быть он позволял интерпретировать такую конструкцию. В описании автор указывает, что так блок становится обтекаемым с двух сторон.
    • Может с clear путаете? Или в статье спутали. Наверно, древняя?
      http://htmlbook.ru/css/clear
  • Popular Contributors