ipad, 세로 방향으로 3 열에서 2로 전환하는 CSS 방향

Question

내 홈페이지에서 세로 방향으로 전환 할 때이 글을 게시하는 데 불편을 드려 죄송합니다.

@media 쿼리를 사용하여 초상화를 감지하면 세 열에서 두 열로 전환하고 싶습니다. catch는 왼쪽 열에 현재있는 div에 동적 내용이있는 div가 오른쪽에서 왼쪽으로 뒤집힌 div 아래에 겹치고 겹치게됩니다.

"position : absolute"를 설정했기 때문에 새롭게 위치한 오른쪽 div가 확장 된 내용을 포함하고 있다는 것을 알고 있습니다. 누구나이 문제가 발생했는지 그리고 더러운 수정이 있는지 궁금합니다. 여기

#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 구조입니다 : 여기

나는 왼쪽을 채우려는 문제의 두 CSS 요소는하지 않고 해결책을 상상

<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> 

Answer 1

그것은 하드 당신의 HTML 구조이지만 시도해 보겠습니다.

이

내가 당신이 원하는 생각 것입니다 :

1. 당신이 때 세로보기에서 스타일 시트를 전환하는 아이 패드
2. #agenda_wrapper는 과도하게 누워 #summary_wrapper
3. #agenda_wrapper을 변수 높이를 기반으로 한 것입니다 사용자 콘텐츠.
4. CSS 솔루션을 원한다고 가정합니다.

이것은 수레에 좋은 장소입니다. 가변적으로 배치되어야하는 요소를 절대적으로 배치하는 것은 의미가 없습니다.

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

#summary_wrapper { 
    clear: left; 
}