0

コンテナ内で縦方向ではなく横方向にスクロールするように要素をフロートさせる効果的な方法を知っている人はいますか?

たとえば、次のレイアウトがあるとします。

<div id="container">
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
  <div class="item">something</div>
</div>

「コンテナ」に定義された高さと幅を与えると、「コンテナ」が水平にスクロールするようにすべての「アイテム」を浮かせることができることを理解しています。

しかし、「アイテム」がいくつあるかわからない場合はどうなりますか? アイテムの数がわからない場合、コンテナの幅がどれくらいかわかりません...

何か考えや提案はありますか？CSS のみの提案が理想的ですが、提案があれば jQuery プラグインを使用することに反対しません。

4

2 に答える 2

5

white-space: nowrapコンテナとdisplay: inline-block;すべてwhite-space: normalの.item要素に与えることができます

そうすることで、すべての要素の幅の合計を事前に把握したり、javascript/jQuery を介して計算したりする必要がなくなります。次に、インラインブロック要素間のギャップを調整する必要があります（これを実現するにはいくつかの方法があります：http ://css-tricks.com/fighting-the-space-between-inline-block-elements/を参照してください

高さについて — 厳密な doctype が与えられた場合 — 、、および要素に設定height: 100%;して、それらが常にビューポート全体に収まるようにすることもできますhtmlbody#container.itemwidth:100%.item

于 2013-07-02T13:47:03.233 に答える
0

jQuery を使用して内部要素の幅を測定し、それらを数え、対応する幅を親コンテナーに割り当てることもできます (n * m のように、n - 子要素の数、m - 幅)。

于 2013-07-02T13:49:03.620 に答える