컨테이너 div 용 적응 형 CSS

Question

적응 형 레이아웃으로 구현되는 자식 패널이 2 개인 컨테이너 div가 있습니다. 그함으로써

, 단순히 바탕 화면에 그 의미, 2 개 자녀 패널이 나란히하여 과 아이폰을 떠해야한다, 2 개 자식 패널해야 하나 - 아래 - 다른

지금 아래에있는 내 HTML입니다 ;

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

CSS의 경우 데스크탑/iPhone 용 미디어 쿼리 만 사용합니다. 바탕 화면에 대한

(즉, 높은 가능한 폭), 내 CSS, 내 CSS 지금 내 질문은 어떻게해야 내가 코드는

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

입니다 아이폰

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

(즉, 낮은 가능한 폭)입니다 모든 주요 브라우저에서 잘 작동하도록 컨테이너 div?

즉 CSS (데스크톱/iPhone)에서 컨테이너에 'float'을 사용해야하나요, 아니면 float : none을 만드는 것처럼 2 명의 하위 패널과 함께 플레이해야합니까? 플로트 100 % :

아이폰에서 잘 작동합니다 왼쪽 ...하지만 나는 생각에 조금 불편 해요

는 사실은 내가

폭으로 두 아이의 패널을 제공하는 알고 그들은 플로트를 사용합니다 : 왼쪽으로하지만 화면 아래에 다른 하나처럼 나타납니다.

동일한 권장 사항을 제안하십시오.

Answer 1

iPhone 용 수레를 죽이면 필요하지 않습니다. 블럭 요소를 사용하면 자연스럽게 서로 아래에있게되고 사용 가능한 모든 너비가 자동으로 사용됩니다.

컨테이너 div에 overflow: hidden을 사용할 수 있으므로 높이가 넓어 지도록 float가 확장됩니다.