Come rimuovere il margine sull’ultimo elemento di una riga

Ho elementi con la larghezza 10px o 25px. Questi elementi sono tutti distanziati di 5px. Devo inserirli in una scatola da 55 px.

 .container{ width: 55px; } .my_inner{ display: inline-block; margin-right: 5px; } .w10{width: 10px;} .w25{width: 25px;}  
FOO1
FOO2
FOO3
FOO4
BAR1
BAR2

Purtroppo non so quanti elementi (w10 o w25) avrò e non ne conosco l’ordine.

Naturalmente vorrei portare FOO1 su FOO4 sulla stessa riga e BAR1 e BAR2 sulla riga successiva. Ma poiché il margine è incluso nel calcolo, FOO4 non si adatta poiché tutti e 4 gli elementi sono 4 * (10 + 5) = 60px di larghezza.

Non posso usare il selettore :last o :last-child poiché non so quale elemento sarà l’ultimo su ogni riga.

Dovrei essere in grado di impilare 2, 3 o 4 elementi su una riga (w25 + w25, w10 + w10 + w25 o w25 + w25).

Questo non può essere fatto con i CSS.

Devi usare javascript ( preferisco jQuery per facilità d’uso ) per identificare dove si rompono le linee ( dato che è arbitrario )

Ho adattato la mia soluzione a Determina la posizione di avvolgimento in elementi flottati ( su elementi di dimensioni fisse, ma contenitore ridimensionabile )

 var wrapper = $('.container'), boxes = wrapper.children(), margin = parseInt(boxes.first().css('margin-right'),10); $(window).resize(function(){ var w = wrapper.width(), breaks = [], sofar = 0; boxes.removeClass('edge'); boxes.each(function(i,e){ var width = $(e).outerWidth(true); if ( (sofar + width <= w)){ sofar += width; } else { if (sofar + width - margin <= w){ breaks.push(i); sofar = 0; } else { breaks.push(i-1); sofar = width; } } }); boxes .filter(function(i){ return breaks.indexOf(i) > -1; }) .addClass('edge'); }).trigger('resize'); 
 .container{ width: 55px; } .my_inner{ display: inline-block; margin-right: 5px; overflow:hidden; } .w10{width: 10px;background-color:lightblue;} .w25{width: 25px;background-color:lightgreen;} .edge{margin-right:0;} 
  
FOO1
FOO2
FOO3
FOO4
BAR1
BAR2

Vorrei impostare una class usando jQuery. A quel punto la tua pagina sarebbe stata caricata e l’ultimo figlio sarebbe stato definito.

http://api.jquery.com/last-child-selector/

Vai dall’altra parte e imposta uno stile diverso per il primo figlio.

 .my_inner{ display: inline-block; margin: 0 0 0 5px; } .my_inner:first-child{ margin: 0; } 

:first-child è più supportato di :last-child .

Per il supporto IE8 è necessario utilizzare il doctype HTML5