1

我正在努力为我们正在构建的网络应用程序进行响应式设计。

下图显示了我正在处理的原型，取自它下面的 jsfiddle。

而不是灰色块相互折叠，我希望它们继续水平滚动，如果它不在视线范围内，则会导致滚动。

我使用 Erskine 的 gridpak 为我生成响应式网格。有没有办法使用当前网格来实现效果？我对它有点犹豫。

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

提前致谢...
4

2 回答 2

2

white-space:nowrap您可以使用和来实现它display:inline-block。

http://jsfiddle.net/wT8MG/7/

我删除了块之间的空白以消除由渲染空间引起的额外边距，这是内联块的少数缺点之一。

如果您只想滚动行而不是整个页面，请添加overflow-x:scroll到mainorrow类。

编辑：

对于 IE7 支持<!--[if lt IE 8]> <style>.col{display:inline}</style> <![endif]-->，请在 CSS 下方添加。

好的，当我将浏览器模式切换到 IE7 时，IE 通过将文档模式保持在 IE8 标准中来欺骗我。

到目前为止，可以在 IE8+ 中使用的 CSS。为简洁起见进行了编辑。

.side-panel {height: 300px}
.side-panel .container{background-color: blue;}
.main {
    width: 100%;
    white-space:nowrap
}
.container {background-color: #ddd;height: 30px;margin-top: 10px;}
.col {
    display:inline-block;
    vertical-align:top;
    white-space:normal;
    border:0;
    box-sizing:border-box;
    background-clip:padding-box !important;
}

@media screen{
    .col {
        margin-left:1%;
        padding:0 0%;
    }
    .row .col:first-child {margin-left:0;}
    .span_1 {width:19.2%;}
    .span_2 {width:39.4%;}
    .span_3 {width:59.6%;}
    .span_4 {width:79.8%;}
    .span_5 {margin-left:0;width:100%;}
}
于 2012-09-24T17:06:33.647 回答
1

响应式网格的重点是您永远不必水平滚动。

百分比是相对于他们的父母。所以无论你设置什么宽度<div class="main row">，你的每一列总是占总数的百分比。

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

于 2012-09-24T16:51:15.143 回答