Question

我正在开发一个响应式幻灯片放映，用户可以上传任意数量的图像，应用程序动态生成可以放入任何设备的幻灯片放映。现在我遇到一个问题

<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 px的固定值。所以总宽度为5 * 300 + 5 *填充。现在我可以在我的java代码中动态设置容器的宽度以适合单行中的所有图像，并隐藏超过940px的容器，如大多数普通幻灯片中所示。我想知道是否有一个css解决方案，如收缩包装收缩内联div，这里我想扩展容器。

此致

麦克莱恩

Answer 1

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

如何根据元素的宽度和数量调整父div的大小

1 个答案: