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/

インラインブロックのいくつかの欠点の1つである、レンダリングされるスペースによって生じる余分なマージンを排除するために、ブロック間の空白を削除しました。

ページ全体ではなく行だけをスクロールしたい場合は、またはクラスに追加overflow-x:scrollします。mainrow

編集：

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%。フローティング要素は、親よりも大きい場合は常に次の行に折りたたまれます。また、常に親よりも大きくなるため、折りたたむしかありません。それらをすべて1行にまとめる唯一の方法は、列の合計幅を親コンテナの100％以下にすることです。

于 2012-09-24T16:51:15.143 に答える