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,530
    Total Members
    3,128
    Most Online
    6eJlbIu
    Newest Member
    6eJlbIu
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Ну, как я понял, это для динамичных сайтов, и все товары должны быть в какой то базе данных?
      А как через javascript обратиться к базе данных?
       
    • начнем с того, что данные ваших товарных позиций должны быть структурированы, например если они хранятся в SQL, то в вашем случае это может выглядеть:

      table
      date_start | date_stop | type | color | capacity | carrying

      одна строка - одна позиция
      SQL запрос к данной таблице вернет массив объектов с данными свойствами из таблицы (table)
      Без каких либо условий - это будут все записи. Если вам нужен фильтр по какой-либо колонке/колонкам или сортировка, то для этого в SQL запрос добавляются условия которые передаются в скрипт через POST или GET запрос с помощью формы
      например:

      <form method="post">
      <input name="date_start">
      <input name="date_stop">
      ....
      type и color логично сделать через select чтобы выбирать из существующих возможных вариантов
      capacity и carrying возможно потребуется возможность указания диапазона (от и до)
      ....
      </form>

      все выше перечисленное только в рамках возможных вариантов которых можно еще придумать
      если мы например укажем date_start то в скрипте используя $_POST['date_start'] можно будет добавить условие в SQL запрос
      ... WHERE `table`.`date_start` = $_POST['date_start']
      в этом случае на странице вывода позиций будут присутствовать только с Дата начала аренды указанной в фильтре

      в целом данная система - это большой комплекс разных механизмов в котором очень много нюансов, но если задаться целью, то можно сделать простенький фильтр на сайте
       
    • Здравствуйте. До сегодняшнего дня, я только занимался версткой макетов, и не совсем понимаю как в принципе после верстки сайты оживают и начинают работать. 

      Вот например, я сверстал карточки товаров, и там есть сортировка, но понятия не имею как его делать.

      Там есть формы: 
      - Дата начала аренды
      - Дата конца аренды
      - Тип транспорта
      - Цвет
      - Вместимость
      - Грузоподъемность Буду очень благодарен тому кто распишет как все это работает, а то понять не могу, что-то для меня это совсем темное и туманное.... 
  • Popular Contributors