非語義網格。爲什麼最後一個div被轉移到其他div下面？

Question

我正在使用非語義流體網格，並且希望有一行div，所有一行，所有行都加起來爲頁面的100％。

<div class="grid-container"> 
    <div class="grid-parent yy name-strip zz"> 
    <div class="yellow-pink-border mobile-grid-20 xx"></div> 
    <div class="green-blue-border mobile-grid-40 xx "></div> 
    <div class="red-yellow-border mobile-grid-15 xx"></div> 
    <div class="yellow-pink-border mobile-grid-20 xx"></div> 
    <div class="green-blue-border mobile-grid-5 xx"></div> 
    </div> 
</div> 

網格父= 100％和20％+ 40％+ 15％+ 20％+ 5％= 100％，所以爲何最後一個div（green-blue-border mobile-grid-5）向下移動到下一行，當瀏覽器窗口變小了？當的jsfiddle的結果窗口周圍200像素辦法：

http://jsfiddle.net/WNRbS/9/

的事情是，它工作在同一個斷點，所以我真的不知道是怎麼回事。

Answer 1

覺得這並更換

的jsfiddle LINK http://jsfiddle.net/lvtrvd/44Jnx/

.grid-5, .mobile-grid-5, .tablet-grid-5, .grid-10, .mobile-grid-10, .tablet-grid-10, .grid-15, .mobile-grid-15, .tablet-grid-15, .grid-20, .mobile-grid-20, .tablet-grid-20, .grid-25, .mobile-grid-25, .tablet-grid-25, .grid-30, .mobile-grid-30, .tablet-grid-30, .grid-35, .mobile-grid-35, .tablet-grid-35, .grid-40, .mobile-grid-40, .tablet-grid-40, .grid-45, .mobile-grid-45, .tablet-grid-45, .grid-50, .mobile-grid-50, .tablet-grid-50, .grid-55, .mobile-grid-55, .tablet-grid-55, .grid-60, .mobile-grid-60, .tablet-grid-60, .grid-65, .mobile-grid-65, .tablet-grid-65, .grid-70, .mobile-grid-70, .tablet-grid-70, .grid-75, .mobile-grid-75, .tablet-grid-75, .grid-80, .mobile-grid-80, .tablet-grid-80, .grid-85, .mobile-grid-85, .tablet-grid-85, .grid-90, .mobile-grid-90, .tablet-grid-90, .grid-95, .mobile-grid-95, .tablet-grid-95, .grid-100, .mobile-grid-100, .tablet-grid-100, .grid-33, .mobile-grid-33, .tablet-grid-33, .grid-66, .mobile-grid-66, .tablet-grid-66 { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding-left: 0px; 
    padding-right:0px;