响应式布局问题

Question

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

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

我不希望灰色块在彼此之下折叠，而是希望它们在水平方向上继续，如果它不在视野范围内会导致滚动。

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

http://f.cl.ly/items/1v3b0v2h3i2t1N0q3X0i/Screen%20Shot%202012-09-24%20at%2017.09.42.png

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

提前致谢...

Answer 1

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

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

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

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

修改

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

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

到目前为止，CSS将在IE8 +中运行。编辑简洁。

.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%;}
}

Answer 2

响应网格的重点是你不应该横向滚动。

百分比与父母相关。因此，无论您为<div class="main row">设置的宽度是多少，每个列都将占总数的百分比。

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