3列響應佈局問題

Question

有沒有人知道爲什麼在3列流體佈局中的第三個孩子會下降到下一行，當它移動的位置沒有設置媒體查詢？

我感覺到它與填充有關，但我試過去除所有的填充，它仍然做到了（所有這些都在稍微不同的點上）。

該網站目前在WP即將推出模式，但如果有人能夠並願意看看它，我可能會把它活一點。這讓我瘋狂！

由於我在這裏沒有足夠的評分，我不允許顯示照片，所以也許他們的鏈接將起作用？

這是在1006px - 這很好。

CLICK HERE TO VIEW - Sample 1

這是它的外觀時，大小帶下1001PX - 不精！ 我預計它會擴展並保持在3列，直到它達到889px的第一個媒體查詢集，但事實並非如此。相反，它做到這一點...

CLICK HERE TO VIEW - Sample 2

，這是它本身的行爲，做因爲我已經將它設置爲在給定889px查詢 - 罰款。

...好，我不允許在這裏發佈超過2個鏈接，這樣您將不得不把我的話，這裏:(

這是代碼：

<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

難，而無需現場URL檢查是肯定的。通常，這種問題是由於邊距和補打破潛在的網格，但在這種情況下，下面看起來problemaatic我

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