Перемещение макета страницы с помощью CSS

У меня проблема, когда я хочу изменить расположение веб-страницы с помощью CSS для просмотра на мобильных устройствах. Текущая настройка для рабочего стола - это боковая панель, перемещаемая слева, и текстовое поле, перемещаемое справа. HTML выглядит следующим образом:

<div id="container">
   <div id="sidebar">...</div>
   <div id="textbox">...</div>
</div>

Моя дилемма заключается в том, что на мобильных устройствах я хочу, чтобы содержимое боковой панели отображалось под текстовым полем, и я изо всех сил пытаюсь создать CSS для этого. Я использую медиа-запросы для таргетинга на смартфоны, например:

@media screen and (max-width:479px) {
  /* Target portrait smartphones */
}

Может ли кто-нибудь предоставить мне CSS для этого? Заранее спасибо.


mobile html css media-queries page-layout
person amburnside    schedule 10.04.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Это довольно просто, для этого вам следует использовать его вот так

<div id="container">
   <div id="textbox">...</div>
   <div id="sidebar">...</div>
</div>

Сначала текстовое поле, потому что вы удалите float для мобильных устройств. Таким образом, сначала идет текстовое поле, а затем боковая панель.

CSS:

.textbox {
    width: ***px;
    float right;
}
.sidebar {
    width: ***px;
    float left;
}
@media screen and (max-width:479px) {
  /* Target portrait smartphones */
  .textbox, .sidebar {
     float: none;
  }
}

Надеюсь это поможет ! :)

person jhon    schedule 10.04.2013

arrow_upward
0
arrow_downward

Проще всего было бы иметь #sidebar после #textbox в вашем html, это не повлияет на просмотр рабочего стола, а затем для мобильных устройств вы можете просто удалить поплавки:

@media screen and (max-width:479px) {
  #sidebar, #textbox {
    float: none;
  }
}
person dezman    schedule 10.04.2013