Ipad, CSS ориентация переключения с 3 столбцов на 2, когда в портретной - PullRequest
Новая
       2

Ipad, CSS ориентация переключения с 3 столбцов на 2, когда в портретной

0 голосов
/ 10 июня 2011

Извините, что опубликовал это здесь, но у меня есть проблемы с ipad при переключении на книжную ориентацию на моем веб-сайте.

с помощью запроса @media для определения портрета, я хочу переключиться с трехстолбцов до двух.Подвох в том, что div, который в данный момент находится в левом столбце, имеет динамическое содержимое, расширяет его высоту и перекрывает под div, который я переворачиваю, с правой стороны на левую.

Я знаю, что недавно расположенныйright div скрывает расширенный контент, потому что я установил его «position: absolute».Хотите знать, если кто-то сталкивался с этой проблемой и имеет быстрое грязное исправление.

Вот два рассматриваемых элемента CSS, которые я хочу заполнить в левой части: 



#main_wrapper #agenda_wrapper {
  width:23%;
  left: 5px;
  top: 2px;
}
#main_wrapper #summary_wrapper {
  float:left;
  position:absolute;
  left: 5px;
  top: 280px;
  width: 23%;
}

ВотHTML структура: 


<div id="wrapper">
  <header id="pageHeader">
  <div id="main_wrapper">
    <div id="agenda_wrapper"></div>
    <div class="main"></div>
    <div id="summary_wrapper"></div>
  </div>
 <footer>
</div>

1 Ответ

0 голосов
/ 10 июня 2011

Трудно представить решение без вашей HTML-структуры, но я постараюсь.

Я думаю, что вы этого хотите:

  1. Вы переключаете таблицы стилей, когдав книжной ориентации на iPad
  2. #agenda_wrapper перекрывает #summary_wrapper
  3. #agenda_wrapper с переменной высотой в зависимости от содержимого пользователя.
  4. ПредполагаетсяВы хотите решение CSS.

Это хорошее место для поплавков.Не имеет смысла абсолютно позиционировать элемент, который должен быть изменяемым. 

#agenda_wrapper,
#summary_wrapper 
{
  width: 23%;
  float: left;
}

#summary_wrapper {
  clear: left;
}
...