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*padding。现在我可以在我的 java 代码中动态设置容器的宽度，以将所有图像放在一行中，并隐藏超过 940 像素的图像，如大多数普通幻灯片所示。我想知道是否有一个 css 解决方案，比如缩​​小内联 div 的收缩包装，这里我想扩展容器。

问候，

麦克莱恩

4

1 回答 1

-1

我建议使用display:inline-block内部元素和white-space:nowrap外部 div。如果您可以创建一个有助于显示代码更改的 jsfiddle。

于 2013-11-08T06:30:00.003 回答