CSS: Simulazione della larghezza flessibile (senza larghezza minima) -

Question

Ho un contenitore DIV di larghezza 100% contenente x div. L'ultimo DIV secondario galleggia a destra, il resto rimane a sinistra. Tutti i DIV bambini rimangono in una linea finché si inseriscono nella barra (tutti orientati a sinistra, eccetto per l'ultimo div che si trova da solo a destra). Se la finestra viene ridimensionata più piccola e i bambini non hanno spazio sufficiente, collassano dal loro orientamento orizzontale (che non desidero). Per risolvere questo problema, so che posso impostare una larghezza minima del contenitore DIV, il problema è che c'è una quantità variabile di DIV nel contenitore, di larghezza variabile. Mi piacerebbe simulare la possibilità di impostare una larghezza minima dove del contenitore dove min-larghezza = larghezza di tutti i bambini, ma non posso calcolarli perché sono variabili (che simulerebbe lo spazio flessibile tra il div destro e il resto , ma non permettergli di avvicinarsi più di quanto dovrebbero essere permessi (e quindi di far crollare i div)).

So che questo è un po 'poco chiaro ecco un immagine:

Grazie!

Answer 1

Odio dirlo (o piuttosto la folla anti-table lo odierà) ma sai cosa lo fa abbastanza facilmente?

Proprio così: tabelle.

<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> 

div interni sono importanti perché troppo pieno nascosto funziona solo su elementi di blocco e le celle della tabella non sono bloccare elementi (sono tipo di display "table-cell").