Immagini fluide in una riga

Question

Mi sono imbattuto in un piccolo problema, che, per qualche motivo, non ho idea di come risolvere. Potrebbe essere uno di quei casi in cui sembra solo semplice, ma impossibile da implementare. Ecco il problema:

• Vorrei aggiungere alcune immagini l'una accanto all'altra in un div. Non hanno bisogno di avere una spaziatura tra
• Il Div ha un set di larghezza percentuale in modo da raggiungere un certo punto vorrei che quelle immagini iniziassero a diventare più piccole. Quello che succede ora è che le immagini cadono semplicemente in verticale quando il div non può più contenerle.

Il trucco per far ridimensionare le immagini è aggiungendo IMG {Max-Width: 100%; } Nel file CSS, ma non funzionerebbe in questo caso. Vorrei chiedere se qualcuno conosce una soluzione facile per questo problema? Potrei provare a impostare la larghezza massima per ogni immagine su un numero diverso a seconda delle loro larghezze, ma sono affascinato da alcuni calcoli in alcuni browser (sappiamo tutti come alcuni browser trattano le percentuali con luoghi decimali).

Grazie in anticipo

Esempio non di lavoro:

<div style="width:40%"><img src="img1.jpg" /><img src="img2.jpg" /></div>
CSS: img { max-width: 100%; }

Commenti: questo è perfetto per una singola immagine, quindi sto cercando qualcosa di semplice per più immagini.

Esempio di lavoro:

<div style="width:40%"><img src="img1.jpg" style="width:47.88%" /><img src="img2.jpg" style="width:52.12%" /></div>

Commenti: il calcolo delle larghezze percentuali è un dolore e non sono sicuro che funzionerà anche in tutti i casi.

Answer 1

Penso che combatterai una battaglia in salita se provi a fare tutto in un solo div. Una soluzione facile e affidabile è utilizzare una tabella. Potresti anche farlo con un mucchio di div che si avvicinano a un tavolo.

http://jsfiddle.net/chad/usryx/ - Tavoli

http://jsfiddle.net/chad/usryx/1/ - Divs mascherato da tavoli

http://jsfiddle.net/chad/usryx/2/ -Un effetto leggermente diverso con Div inline-block all'interno di uno spazio bianco: NowRap Container. Possibile solo se sai quante immagini ci sono in ogni riga in anticipo

Tutto dipende da come vuoi che questo degrada nei browser più vecchi. L'uso di una tabella manterrà tutto sulla stessa linea, ma la larghezza di quella linea non si ridimensiona. L'uso di Div impilerà le immagini in verticale.