1

私は、実装している Web サイト用の自己完結型レスポンシブ CSS コンポーネント (カルーセルのタイプ) に取り組んでいます。

必要なのは、(サーバーからロードされた) コンテンツ アイテムを無限に持ち、一度に 2 つだけ表示することです。ユーザーがアイテムのリストを進めると、左にスクロールしているように見え、新しいアイテムが右から移動して現在のアイテムを左に押し出します。

項目は、現在のレスポンシブ レイアウトに従って幅を取得する必要があります。

一般的な考え方は、ページ レイアウトの一部であり、ビューポートのサイズを埋めるように取得するコンテナーであるpxまたは に記載されている任意の幅を受け入れることができるビューポートを持つことです。およびラップせずに水平に並べて配置されたアイテムの場合、アイテムの幅は 50% になるため、ちょうど 2 つのアイテムがコンテナー/ビューポートに収まり、残りのアイテムはオーバーフローします (非表示になります)。%width: 100%

<div class="viewport">
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <!-- more items get loaded as the user advances through the content -->
    </div>
</div>

「スクロール」は、最初のアイテムに負のマージンを設定することで実現されます。この手法では、常に負のマージンを設定できます。<アイテム数> * 50%

私はこれを主に次のjsfiddleで動作させました: http://jsfiddle.net/gZBEV/5/ アイテムは正しく配置され、周囲のビューポートの幅に応じて幅を取得します。(ボタンを使用してアイテムの移動/スクロールをエミュレートします)

問題は、レイアウトを台無しにする各アイテム間に現れる水平方向のギャップ (矢印で表示) です。

問題

これに対する解決策は、次のようにアイテム間に水平方向の隙間がない方法を見つけることです。

理想的なソリューション

このフィドルhttp://jsfiddle.net/gZBEV/5/を出発点として使用してください。

4

2 に答える 2

2

div 内のキャリッジ リターンを削除すると、スペースが削除されます。

<div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div></div>
于 2013-07-01T22:13:47.473 に答える
2

要素があるからdisplay:inline-blockです。インライン ブロック レベル要素は、line-height と font-size と空白を尊重します。親の font-size を 0px に変更すると、隙間がなくなります。これは、事後にフォント サイズを再割り当てする必要があることを意味します (画像のみのスライダーには最適ですが、コンテンツ スライダーにはあまり適していません)。

http://jsfiddle.net/RAbSU/

.container {
  ...
  display: inline-block;    
  font-size: 0px;
  & > * {      
    font-size: 12px;
  }
  ...

編集:それ以外の場合は、フォーマットをdisplay:blockwithに変更するだけfloat:leftです。

于 2013-07-01T22:16:11.913 に答える