0

レスポンシブ 2 カラム レイアウトが進行中です。最初の列は固定幅ですが、2 番目の列は csscalcプロパティを使用して、100% の幅から特定のピクセルを差し引いています。

2 番目の列でやりたいことは、画面のサイズや幅に関係なく、水平方向にスクロールすることです。私がやろうとしていることを説明するために簡単なペンをまとめました: http://codepen.io/trevanhetzel/pen/nbdIt

ご覧のとおり、2 番目の列には複数の.thingdiv があり、左にフロートされ、幅が定義されています。私が望まないのは、これらの.thingdiv が 2 番目の列内のスペースを使い果たしたときに別の行にドロップダウンすることです。

これはどのように達成できますか？プロパティをいじってみoverflowましたが、別のコンテナ div に別の配置プロパティなどが必要になるのではないかと思います。何かアドバイス？

4

1 に答える 1

2

どうぞ: http://codepen.io/seraphzz/pen/lutjb

これに対する解決策は次のとおりです。

  1. .thingからfloat: left;に変更しdisplay: inline-block;ます。これにより、これらの要素が整列された状態に保たれますが、流れも維持されるため、親要素は子要素があることを認識します。
  2. プロパティを与えsectionますwhite-space: nowrap;。これにより、.thing要素が別の行に移動するのを防ぎます。
  3. プロパティを与えsectionますoverflow-x: auto。これにより、div を水平方向にスクロールできますが、スクロールバーを必要とする十分な数の子がない場合はスクロールバーを非表示にします。
  4. 最後にsection、font-size: 0プロパティを指定します。デフォルトでは、要素はdisplay: inline-blockテキストのように扱われるため、自動マージンが与えられます。これらの要素の親に設定font-size: 0すると、その自動マージンが削除され、マージンを自由に設定できるようになります。これらの子アイテムにテキストが含まれている場合は、これらの子アイテムの font-size を手動で設定する必要があることに注意してください。
于 2013-05-22T23:24:18.663 に答える