CSS: simulando ancho flexible (sin ancho mínimo) -

Question

Tengo un contenedor DIV de 100% de ancho con x divs. El último niño DIV flota a la derecha, el resto flota a la izquierda. Todas las DIV de niños permanecen en una línea siempre que quepan en la barra (todas orientadas hacia la izquierda, excepto el último div que se encuentra solo a la derecha). Si la ventana se redimensiona más pequeña y los niños no tienen suficiente espacio, colapsan por su orientación horizontal (que no quiero). Para solucionar esto, sé que puedo establecer un min-ancho del contenedor DIV, el problema es que hay una cantidad variable de DIV en el contenedor, de ancho variable. Me gustaría simular la posibilidad de establecer un min-width donde del contenedor donde min-width = width de todos los elementos secundarios, pero no puedo calcularlos porque son variables (lo que simularía espacio flexible entre el div correcto y el resto , pero no permita que se acerquen más de lo que deberían (por lo tanto, colapsando los divs)).

Sé que esto es un poco confuso lo que aquí es una imagen:

Gracias!

Answer 1

Odio decirlo (o mejor dicho, la gente que se opone a la mesa lo odiará) pero ¿sabes qué hace esto con bastante facilidad?

Así es: tablas.

<style type="text/css"> 
#topbar { width: 100%; } 
#topbar div { white-space: nowrap; overflow: hidden; } 
#topright div { text-align: right; } 
</style> 
<table id="topbar"> 
<tr> 
    <td><div>Item 1</div></td> 
    <td><div>Item 2</div></td> 
    <td><div>Item 3</div></td> 
    <td><div>Item 4</div></td> 
    <td><div>Item 1</div></td> 
    <td id="topright"><div>Item Right</div></td> 
</tr> 
</table> 

Los divs internos son importantes porque desbordamiento oculta sólo funciona en elementos de bloque y celdas de tablas no son elementos de bloque (que son "table-cell" Tipo de visualización).