Evite divs flutuantes de cair para a próxima linha
Estou procurando criar um visualizador composto por um número arbitrário de divs alinhados horizontalmente, onde apenas 3 são visíveis a qualquer moment
<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>
Minha abordagem é ter um div pai ("viewport") de largura / altura e estouro fixos: oculto para deslizar seu div filho ("slides"), que tem o conteúdo real em seus divs filhos, para a esquerda ou para a esquerda. certo
Para que isso funcione, preciso que os divs filhos dos "slides" estejam todos alinhados horizontalmente com nenhum deles agrupado abaixo, o que acontecerá por padrão. Consigo fazer isso quando souber e especificar a largura cumulativa dos filhos da div "slides" em CSS, mas os adicionarei / removerei dinamicamente em JS. Gostaria de evitar a necessidade de alterar constantemente a largura da div "slides" no JS e preferir apenas descobrir como fazê-lo no CSS.
ntão, em resumo, como faço para impedir que uma série de divs seja agrupada abaixo se a largura total for desconhecid