Evite que los divs flotantes caigan a la siguiente línea
Estoy buscando crear un visor compuesto por un número arbitrario de divs alineados horizontalmente donde solo 3 son visibles en un momento dado.
<div id="viewport">
<div id="slides">
<div>Content 1</div> <!-- not visible -->
<div>Content 2</div> <!-- visible -->
<div>Content 3</div> <!-- visible -->
<div>Content 4</div> <!-- visible -->
<div>Content 5</div> <!-- not visible -->
<div>...</div> <!-- not visible -->
</div>
</div>
Mi enfoque es tener un div primario ("viewport") de ancho / alto fijo y desbordamiento: oculto para deslizar su div secundario ("slides"), que tiene el contenido real en sus div secundarios, a la izquierda o al Derecha
Para que esto funcione, necesito que las divisiones secundarias de "diapositivas" estén alineadas horizontalmente sin que ninguna de ellas se ajuste a continuación, lo que sucederá de manera predeterminada. Tengo éxito en hacer esto cuando sé y especifico el ancho acumulativo de los elementos secundarios del div "diapositivas" en CSS, pero los agregaré / eliminaré dinámicamente en JS. Me gustaría evitar tener que cambiar constantemente el ancho de la división de "diapositivas" a través de JS y preferiría simplemente descubrir cómo hacerlo en CSS.
n resumen, ¿cómo puedo evitar que una serie de divs se ajuste a continuación si se desconoce el ancho total?