html - 非语义网格。为什么最后一个 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>

Grid parent = 100% and 20% + 40% + 15% + 20% + 5% = 100%，那么为什么最后一个 div (green-blue-border mobile-grid-5) 当浏览器窗口变小时向下移动到下一行？当 jsfiddle 的结果窗口接近 200px 时:

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

问题是，它在同一个断点工作，所以我真的不知道发生了什么。

Answer 1

找到这个并替换它

JSFIDDLE 链接 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;