text-align: justify and images

Question

Ho una lista di immagini (non in una lista, ma potrebbe essere se questo potrebbe risolvere il problema) che voglio riempire l'intera larghezza di un div. Ho provato il codice in fondo, e mentre giustifica qualsiasi testo nel tag p non fa lo stesso per le immagini. Come posso farlo per distribuire uniformemente le immagini su tutta la larghezza del div?

<div> 
    <p> 
    <img src="image1.png" alt="foo" /> 
    <img src="image2.png" alt="foo" /> 
    <img src="image3.png" alt="foo" /> 
    <img src="image4.png" alt="foo" /> 
    <img src="image5.png" alt="foo" /> 
    </p> 
</div> 

mio CSS:

div { width: 30em; } 
p { text-align: justify; } 

Answer 1

Nel testo giustificato, l'ultima riga di testo di un paragrafo non viene espansa per riempire l'intera larghezza. Quindi, per rendere le immagini in linea sparsi è necessario abbastanza contenuti per tirare il paragrafo fuori per due o più linee, ad es .:

<div> 
    <p> 
     <img src="image1.png" alt="foo" /> 
     <img src="image2.png" alt="foo" /> 
     <img src="image3.png" alt="foo" /> 
     <img src="image4.png" alt="foo" /> 
     <img src="image5.png" alt="foo" /> 
     xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
    </p> 
</div> 

(o qualche altra versione ugualmente-brutto, ma meno visibile che coinvolge  ). Questo è un po 'un brutto scherzo.

Answer 2

Questo javascript si diffonderà le immagini sopra il div dal middleand ai lati:

var container = document.getElementById("imageContainer"); 
var imageList = container.getElementsByTagName("img"); 

var totalWidth = container.offsetWidth; 
var sliceWidth = totalWidth/imageList.length; 

for(i = 0; i < imageList.length; i++) 
{ 
    var totalMargin = sliceWidth - imageList[i].offsetWidth; 
    var margin = totalMargin/2; 

    imageList[i].style.margin = "0px " + margin + "px 0px " + margin + "px" 
} 

Lo script asume un paio di cose;

1. Ci deve essere un ID del div (imageContainer)
2. Tutte le immagini devono avere la stessa larghezza
3. Per la mia comodità ho testato solo in IE7, ci sono cose che io non sono sicuro di come "offsetWidth" che potrebbe essere diverso in Firefox, ecc., ma questo è principalmente per te per ottenere il concetto di script.

Si potrebbe naturalmente aggiungere il supporto per le larghezze di immagine variabile e così via, ma non era proprio nel campo di applicazione qui.

Questo script distribuirà le immagini in modo uniforme se si aggiungono o rimuovono immagini, naturalmente fino a un limite. Se la larghezza totale delle immagini è maggiore della larghezza del div, verrà eseguito il wrapping.

Spero che aiuti!

Answer 3

<!-- not elegant --> 
    <div style="color:backgroundcolor"> 
     <p> 
     <img src="image1.png" alt="foo" 
     /><em>.</em> 
     <img src="image2.png" alt="foo" 
     /><em>.</em> 
     <img src="image3.png" alt="foo" 
     /><em>.</em> 
     <img src="image4.png" alt="foo" 
     /><em>.</em> 
     <img src="image5.png" alt="foo" /> 
     </p> 
    </div> 

    My CSS: 

    div { width: 30em; } 
    p { text-align: justify; } 

Answer 4

Mi rendo conto che è il modo fuori moda ma appena ho pensato di aggiungere una soluzione semplice.
text-align: justify funziona solo se è presente più di una riga (se la si utilizza su un paragrafo di testo, si vedrà che l'ultima riga non è giustificata). Questa piccola estensione jQuery aggiungerà un elemento invisibile per l'elemento che si sta tentando di giustificare e, quindi, le immagini saranno equamente distribuite:

$.fn.justify = function() { 
$(this).css("text-align", "justify"); 
$(this).append("<span style='display: inline-block;visibility: hidden;width:100%'></span>"); 
} 

Poi tutto quello che dovete fare è chiamare:

$("#your-element").justify(); 

Answer 5

Le immagini sono visualizzate in linea in modo da poter usare l'allineamento del testo: giustificare la proprietà css per allineare le immagini con css. Come altri suggeriscono, se vuoi giustificare l'ultima riga dovrai inserire un ordinamento o un'immagine vuota che occupa l'intera larghezza alla fine del tuo elenco di immagini.

Vedi http://fiddle.jshell.net/ewv6K/show/

<!DOCTYPE html> 
<title> 
    Justified Images example 
</title> 
<style> 
    body { 
     text-align:center; 
    } 
    #container { 
     width:800px; 
     text-align:justify; 
     margin-left:auto; 
     margin-right:auto; 
    } 
    #force { 
     width:100%; 
     height:0px; 
    } 
</style> 
<div id="container"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/AfricanWildCat.jpg/220px-AfricanWildCat.jpg" alt="cat 1"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/WhiteCat.jpg/220px-WhiteCat.jpg" alt="cat 2"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Ojo_de_gata_trim.jpg/220px-Ojo_de_gata_trim.jpg" alt="cat 3"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Scheme_cat_anatomy-en.svg/220px-Scheme_cat_anatomy-en.svg.png" alt="cat 4"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="cat 5"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Listen%2C_do_you_want_to_know_a_secret.jpg/220px-Listen%2C_do_you_want_to_know_a_secret.jpg" alt="cat 6"> 
    <!-- Force the last row to be justifed - use a blank image here, not a real one like I have --> 
    <img id="force" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Olhos_de_um_gato-3.jpg/220px-Olhos_de_um_gato-3.jpg" alt="end"> 
</div>​ 

Answer 6

Il modo più semplice per farlo è:

<style> 
    .justify-image{ text-align: justify;} 
    .justify-image img{display:inline-block;} 
    .justify-image:after{content:""; display: inline-block; width: 100%; height: 0;} 
</style> 

<p class="justify-image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
    <img src="/path/img.jpg" alt="my image"> 
</p> 

1. Avete bisogno di un contenitore con text-align: justify;, Paragrafo in questo caso.
2. Le immagini devono essere display: blocco in linea; altrimenti non interagiranno come "testo" (nel testo giustificativo l'ultima riga non è interessata è necessario aggiungerne uno per farlo funzionare)
3. Hai bisogno di una riga di "testo" sotto le tue immagini per giustificare l'applicazione, con pseudo- elemento si può raggiungere facilmente con la creazione di un * : dopo

*: dopo: non dimenticare il contenuto: ""; senza di esso non apparirà. Nel mio esempio ho usato un blocco in linea, larghezza 100%. Interromperà sempre la linea dopo il contenuto nel mio paragrafo.

Felice codifica! :)

Answer 7

Perché nessuno menziona nelle risposte precedenti. Al giorno d'oggi (2017) e per un po 'fa si può usare CSS3 flexbox, applicando la proprietà justify-content:space-between

div { 
 
    display: flex; 
 
    justify-content: space-between 
 
}

<div> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
    <img src="//placehold.it/50" alt="foo" /> 
 
</div>