响应式布局问题

Question

我正在努力为我们正在建设的web应用程序提供一个响应式的设计。

下图显示了我正在做的一个原型，取自下面的jsfiddle。

而不是灰色的块相互折叠在一起，我希望它们继续水平，如果它离开视线，就会产生滚动。

我使用Erskine的gridpak为我生成了响应网格。有没有什么方法可以使用当前的网格来达到这种效果？我对此有点束手无策。

​

http://jsfiddle.net/brendan_rice/wT8MG/

先谢谢你...

Answer 1

响应式网格的全部意义在于，你永远不需要水平滚动。

百分比是相对于它们的父代的。因此，无论您为<div class="main row">设置多大的宽度，您的每一列都将始终是总数的百分比。

因此，如果我们将所有列相加，就会得到(8 cols x (19.2% width + 1% margin)) - 1% remove first margin = 160.6%。当浮动元素比它们的父项大时，它们总是折叠到下一行，并且由于它总是比它的父项大，所以它不得不折叠。将所有列放在一行的唯一方法是将列的总宽度加起来等于其父容器的100%或更少。