1

設計中の Web ページにレスポンシブ カルーセルを自分で実装しようとしています。スクリーンショットで説明するのが何千倍も簡単な問題がいくつかあるので、ここに示します。

ここに画像の説明を入力

ご覧のとおり、アイテムをスライスするための 2 つの矢印と、水平スクロールバーがあります。

矢印はそれぞれ左と右に浮かんでおり、アイテムはコンテナーinline-block内の divdiv.itemsであり、幅は 90% (およびオーバーフロー x: スクロールまたはコース) です。

SO今、DOMに別のアイテムを追加すると、これで終わります:

ここに画像の説明を入力

4 番目の項目が下に移動したのはなぜですか? 私はアイテムを浮かせていません。水平スクロールを指定したので、それが後ろにあり、スクロールバーで見ることができると思います。

私は何が欠けていますか？

関連するコードを貼り付けます：

HTML:

<div class="grid">
  <div class="left-arrow"></div>
  <div class="items">

    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>
    <div class="item">...</div>

  </div>
  <div class="right-arrow"></div>
</div>

CSS:

div.grid {
  margin-top: 20px;
  padding: 10px 75px;
  text-align: center;
  z-index: 1000;
}

div.grid .left-arrow, div.grid .right-arrow {
  position: relative;
  top: 70px;
}

div.grid .left-arrow {
  float: left;
  width: 0;
  height: 0;
  margin: 0 30px 0 -50px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 35px solid #ddd;
}

div.grid .right-arrow {
  float: right;
  width: 0;
  height: 0;
  margin: 0 -50px 0 30px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 35px solid #ddd;
}

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
}

div.item {
  margin: 10px;
  display: inline-block;
  position: relative;
  left: 0;  
}

編集: Oreilly はまさに私が達成したいと思っているものを持っています:

http://shop.oreilly.com/category/browse-subjects/programming.do

4

1 に答える 1

1

コンテナは、追加のアイテムを収容するために高さが増しています。コンテナ要素に特定の高さを設定することで、探している効果を得ることができるはずです。

編集：さらにテストした後、高さを設定しても実際には影響がないことがわかりました。white-space: nowrap;実際に動作させるには設定が必要です。

の完全な CSS を次に示しますdiv.items(テストでこれを機能させるために変更したのはこれだけです)。

div.items {
  display: inline-block;
  z-index: 100;
  width: 90%;
  overflow-x: scroll;
  white-space: nowrap;
}
于 2013-04-07T19:31:35.240 に答える