3 열의 반응 레이아웃 문제

Question

3 열 유동 레이아웃의 세 번째 아이가 이동하는 지점에 미디어 쿼리가 설정되지 않은 경우 왜 다음 행으로 내려갈 수 있는지 알고 있습니까?

나는 패딩과 관련이 있다는 느낌을 갖지만 모든 패딩을 제거하려고 시도했지만 여전히 약간의 차이점이 있습니다.

사이트는 현재 WP 출시 예정 모드에 있지만 누군가가보고 싶어 할 수 있다면 기꺼이 살 수 있습니다. 그 미친 나를 몰고!

아직 여기에 적절한 등급이 없기 때문에 사진을 보여줄 수 없으므로 링크가 작동 할 수 있습니까?

이것은 1006px입니다. 괜찮습니다.

CLICK HERE TO VIEW - Sample 1

이 크기가 1001px까지 촬영 때 모습입니다 - 잘하지! 889px로 설정된 첫 번째 미디어 쿼리에 도달 할 때까지 크기를 조정하고 3 열에 머물 것으로 예상했지만 그렇지는 않습니다. 대신이 ...

CLICK HERE TO VIEW - Sample 2

을이 작업을 수행하고이 내가 주어진 889px QUERY AT로 설정함에 따라 IT는 자체 행동하고있다 - 좋은.

<div id="Thepagewrap"> 

    <div id="Theheader"> 
     <h1>3 Column Responsive Layout</h1> 
    </div> 

    <div id="Thecontent"> 
     <h2>1st Content Area</h2> 
     <p>This page demonstrates a 3 column responsive layout, complete with responsive images and jquery slideshow.</p> 
    </div> 

    <div id="Themiddle"> 
     <h2>2nd Content Area</h2> 
     <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p> 
     <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> 
    </div> 

    <div id="Thesidebar"> 
     <h2>3rd Content Area</h2> 
     <p>At full width all three columns will be displayed side by side. As the page is resized the third column will collapse under the first and second. At the smallest screen size all three columns will be stacked on top of one another.</p> 
     </div> 

    <div id="Thefooter"> 
     <h4>Footer</h4> 
     <p>Footer text</p> 
    </div> 

</div> 


CSS 

    /* STRUCTURE */ 

#Thepagewrap { 
    padding: 5px; 
} 

#Theheader { 
    height: 100px; 
    padding: 0 15px; 
} 

#Thecontent { 
    float: left; 
    padding: 5px 15px; 
    width: 29%; 
} 

#Themiddle { 
    float: left; 
    margin: 0 6px 6px; 
    padding: 5px 15px; 
    width: 30%; 
} 

#Thesidebar { 
    float: left; 
    padding: 5px 15px; 
    width: 29%; 
} 
#Thefooter { 
    clear: both; 
    padding: 0 15px; 
} 

#Thepagewrap, #Theheader, #Thecontent, #Themiddle, #Thesidebar, #Thefooter { 
    border: solid 1px #ccc; 
} 

#Theheader, #Thecontent, #Themiddle, #Thesidebar { 
    margin-bottom: 5px; 
} 

@media screen and (max-width: 889px){ 
#Thepagewrap { 
     width: 94%; 
    } 
    #Thecontent { 
     width: 41%; 
     padding: 1% 4%; 
    } 
    #Themiddle { 
     width: 41%; 
     padding: 1% 4%; 
     margin: 0px 0px 5px 5px; 
     float: right; 
    } 

    #Thesidebar { 
     clear: both; 
     padding: 1% 4%; 
     width: auto; 
     float: none; 
    } 

    #Theheader, #footer { 
     padding: 1% 4%; 
    } 
} 
@media screen and (max-width: 600px) { 

    #Thecontent { 
     width: auto; 
     float: none; 
    } 

    #Themiddle { 
     width: auto; 
     float: none; 
     margin-left: 0px; 
    } 

    #Thesidebar { 
     width: auto; 
     float: none; 
    } 

} 

@media screen and (max-width: 480px) { 

    #Theheader { 
     height: auto; 
    } 
    h1 { 
     font-size: 2em; 
    } 
    #Thesidebar { 
     display: none; 
    } 

} 

Answer 1

:

은 ... 잘 난 당신이 여기 내 말을 :(

이 코드입니다해야 할 것, 그래서 여기에 2 개 이상의 링크를 게시 할 수 없습니다 해요 검사 할 수있는 라이브 URL을하지 않고해야 할

어려움은. 종종 문제의이 종류는 기본 그리드를 파괴 마진과 패딩에 기인하지만,이 경우 다음이

@media screen and (max-width: 889px){ 
... 
#Thesidebar { 
     clear: both; <===== why is this here? 
     padding: 1% 4%; 
     width: auto; 
     float: none; 
    } 
}