Обратный порядок встроенных блоков?

0

Начиная с текущей, эта настройка выравнивает 2 бокса бок о бок, но затем, когда контейнер становится маленьким, ящики складываются друг на друга, как видно из этого jsfiddle, созданного кем-то, кто помог мне в последний раз: http://jsfiddle.net/gW8r2/1/

Мой вопрос заключается в том, можно ли отменить порядок, который он складывает, поэтому поле справа (синее) складывается поверх левого поля, когда контейнер становится слишком маленьким?

Код, показанный на JSFiddle

CSS:

.parent {
width: 100%;
height: 100%;
border: 1px solid green;
text-align: center;
}

.parent > div {
display: inline-block;
}

.a {
width: 100px;
height: 100px;
background: red;
}

.b {
width: 200px;
height: 100px;
background: blue;
}

HTML

<div class="parent">
<div class="a"></div>
<div class="b"></div>
</div>
Теги:

3 ответа

2
Лучший ответ

Я предлагаю вам обратиться с запросами @media, чтобы применить функцию преобразования rotate() к .parent и его .parent:

@media screen and (max-width: 320px) {
    .parent {
        -webkit-transform:  rotate(180deg);
        transform:  rotate(180deg);
    }

    .parent > div {
        display: block;
        margin: 0 auto 5px;
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }
}

Пример здесь.

Стоит отметить, что запросы @media и преобразования CSS поддерживаются в IE9+.

Поделиться
  • 0
    Привет, спасибо за ваш комментарий! К сожалению, при попытке реализовать это в моем коде это, похоже, не дает эффекта, который ваш код успешно выполнил. Вот мой Jsfiddle, так как вы можете видеть тот же код, что и ваш, но я, возможно, немного сломал что-то, что нарушает эффект! ссылка
  • 0
    @ LukeScotney93 Вы должны выбрать правильную точку останова для правила медиа-запроса, например: max-width: 686px где 686px происходит из 480px красного + 200px синего + 5px синего поля + 1px для уверенности = 686px . Обновленная демоверсия .
Показать ещё 3 комментария
1

Проверьте это demo jsFiddle

CSS

.parent {
    width: 100%;
    height: 100%;
    border: 1px solid green;
    text-align: center;
    text-align: left;
    float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

.parent > div {
    display: inline-block;
    position: relative;
    float: right;
    display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);

}
Поделиться
  • 0
    Спасибо за ваш ответ, но из вашего jsFiddle кажется, что вы просто поменялись местами. Ящики должны оставаться такими же, но правая коробка должна располагаться на левой коробке - это эффект, который я искал.
  • 0
    да, я поменяю оба div друг на друга, твой вопрос в обратном порядке, если встроенный элемент вот почему.
Показать ещё 2 комментария
0

Почему бы просто не сделать это так?

@media screen and (max-width: 320px) {
   .parent{
      direction: rtl;
   }
}


#parent {
  width: 300px;
  height: 100px;
}

#div1,
#div2 {
  width: 49%;
  height: 100%;
  display: inline-block;
}

#div1 {
  background-color: red;
}

#div2 {
  background-color: blue;
}

@media all and (max-width: 320px) {
  #parent {
    direction: rtl;
  }
}
<div id="parent">
  <div id="div1"></div>
  <div id="div2"></div>
</div>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню