Larghezza del float non si restringe più per adattarsi quando il contenuto viene eseguito su più righe

Question

Ecco uno test file.

Ridimensionare la finestra per essere abbastanza ampia da contenere tutte e quattro le caselle. Si noti che il contenitore non è più largo delle scatole, come previsto.

Ridimensionare la finestra in modo che le finestre siano abbastanza piccole da contenere più di una riga. Si noti che il contenitore è l'intera larghezza della pagina (non è consigliabile).

Perché? È possibile prevenirlo in un modo che non dipende dalla dimensione delle scatole?

(Visto su Firefox 3.5 e Chrome 4.0.221.8. Se una soluzione non funziona in IE6, va bene.)

Answer 1

CSS 2.1 sezione 10.3.5 flottanti, elementi non sostituito (http://www.w3.org/TR/CSS21/visudet.html#float-width) dice che :

width = min (max (larghezza minima preferita, larghezza disponibile), larghezza preferito)

• larghezza minima preferita = larghezza di una delle scatole interne, come sono tutte della stessa dimensione.
• larghezza disponibile = larghezza della pagina meno margini/bordi.
• larghezza preferita = larghezza di tutte le caselle interne affiancate.

Questo è completamente sensato per i casi di text wrapping (immagina se la larghezza è cambiata a seconda di quanto la fine della linea arriva al limite dello spazio disponibile) ma non quello che vuoi qui. Non riesco a vedere un modo per evitarlo, però.

Answer 2

Ho riscontrato questo problema con uno span di testo che viene inserito a causa del max-wdith di un div principale. Il confine non si stava riducendo a destra.

Ecco una soluzione JS:

Rimuovere il galleggiante su tutto e fare le foto in linea, quindi spostare lo sfondo per un div involucro e aggiungere un jquery one-liner per risolvere:

<script>$('#galleryWrapper').width($('.gallery').width());</script>

Ecco il codice:

http://jsbin.com/odeya3

Answer 3

È possibile utilizzare le media query per questo. Vedi http://css-tricks.com/css-media-queries/