Адаптивный CSS для контейнера - PullRequest
1 голос
/ 13 октября 2011

У меня есть контейнер div с 2 дочерними панелями, который будет реализован как адаптивный макет.

Под этим я просто подразумеваю, что на рабочем столе 2 дочерние панели должны плавать рядом И на iPhone,2 дочерние панели должны быть одна-под-другой

Теперь ниже мой HTML;

<div class="container">
<div class="panel1"></div>
<div class="panel2"></div>
</div>

Для CSS я просто использую медиазапрос для рабочего стола / iPhone.

Для настольного компьютера (т.е. с большей доступной шириной) мой CSS равен

.panel1{width:50%;float:left} //Span 50% of desktop width
.panel2{width:50%;float:left} //Span 50% of desktop width

Для iPhone (т. Е. С более низкой доступной шириной) мой CSS равен

.panel1{width:100%;float:left} //Span entire iPhone width
.panel2{width:100%;float:left} //Span entire iPhone width

Теперь мой вопрос: какя должен кодировать контейнер div таким образом, чтобы он нормально работал во всех основных браузерах?

т.е. Должен ли я использовать «float» для контейнера в CSS (desktop / iPhone) ИЛИ играть с двумя дочерними элементами?панели типа создания поплавка: нет?

На самом деле я знаю, что для 2 дочерних панелей будет использоваться

ширина: 100%; float: left

будет работатьнормально на айфоне ... но мне немного не по себе от того, что они используют float: слева НО появляются наэкран как один под другим ..

Пожалуйста, предложите несколько лучших советов для того же.

1 Ответ

1 голос
/ 13 октября 2011

Убей поплавки для iPhone, они тебе не нужны. Просто используйте блок-элементы, они будут естественным образом опускаться ниже друг друга и будут использовать всю доступную ширину автоматически.

Вы можете использовать overflow: hidden для контейнера div, чтобы он расширялся по высоте / ширине с помощью float.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...