0

ユーザーが任意の数の画像をアップロードできるレスポンシブ スライド ショーを開発しています。アプリケーションは、任意のデバイスに適合するスライド ショーを動的に生成します。今ここで直面している問題があります

<section id="container">
            <article id="slider">
           <div id="item"><img src="img/image-1.jpg" alt="" /></div>
                <div id="item"><img src="img/image-2.jpg" alt="" /></div>
                <div id="item"><img src="img/image-3.jpg" alt="" /></div>
                <div id="item"><img src="img/image-4.jpg" alt="" /></div>
                <div id="item"><img src="img/image-3.jpg" alt="" /></div>
                <div id="item"><img src="img/image-4.jpg" alt="" /></div>

            </article>
            <article id="nav">
                <div id="prev" onclick="prev();"><img src="img/prev.png" alt="" /></div>
                <div id="next" onclick="next();"><img src="img/next.png" alt="" /></div>
            </article>
        </section>

上記の Html コードは、私の Java コードによって生成されます。ここで、ユーザーは 5 つの画像をアップロードしました。これで、各画像は 300 ピクセルの固定を占有します。したがって、合計幅は 5*300+5*パディングになります。これで、ほとんどの通常のスライド ショーで見られるように、コンテナの幅を Java コードで動的に設定して、すべての画像を 1 行に収め、940 ピクセルを超える画像を非表示にすることができます。インライン div を縮小するシュリンク ラッピングのような css ソリューションがあるかどうかを知りたいのですが、ここではコンテナを拡張したいと考えています。

よろしく、

マクリーン

4

1 に答える 1

-1

display:inline-block内側の要素とwhite-space:nowrap外側の divに使用することをお勧めします。コードの変更を表示するのに役立つjsfiddleを作成できる場合。

于 2013-11-08T06:30:00.003 に答える