Come rendere i tag <img> allineati orizzontalmente nel div?

Devo far apparire le immagini fianco a fianco orizzontalmente nel div. Come lo posso fare?Come rendere i tag <img> allineati orizzontalmente nel div?

HTML:

<div class="Wrapper"> 
    <img src="/wp-content/uploads/2012/07/TFT.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/Ltyt.png" alt="Smiley face" height="90" width="95" /> 
    <img src="/wp-content/uploads/2012/07/artspng" alt="Smiley face" height="90" width="95" /> 
</div>

Riferimento: jsFiddle

fonte

2012-07-03 justcode

: Mostraci il codice HTML di come stai allineando questo IMG in primo luogo. – Starx

Inizia fornendoci maggiori informazioni ... HTML, forse un jsfiddle.net per darci un'idea di ciò che hai già provato – freefaller

Aggiorna la porzione html nel tuo codice, in modo che altri possano rispondere meglio. – Starx

Si potrebbe anche usare le proprietà CSS display: inline-block o float: left per raggiungere questo obiettivo.

codice HTML

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

codice CSS

div img{ display: inline-block;}

div img{ display: block;float: left;margin-right: 5px;}

fonte

2012-07-03 10:57:01 Ravi

Usando il markup che hai dato, solo le prime due immagini si allineano all'orizzonte ... pls hai qualche suggerimento? – justcode

Provare ad aumentare la larghezza del contenitore in cui si trovano. Probabilmente non si adattano in modo tale da interromperlo su un'altra linea. – menislici

fantastico! ... funziona ... grazie – justcode

ora è possibile utilizzato per

Il link predefinita è http://tinkerbin.com/ob9HFOA4

Css

img{ 
    display: inline-block; 
    vertical-align: top; 
    }

demo live http://tinkerbin.com/a5BxIZrs

fonte

2012-07-03 10:47:59

Cosa dovrebbe essere? – Starx

penso che dovresti questo http://tinkerbin.com/pakIgNQQ –

Sul presupposto generale del codice essere qualcosa di simile

<div> 
    <img ... /> 
    <img ... /> 
    <img ... /> 
</div>

Poi, una proprietà CSS semplice otterrà il lavoro fatto.

div img { display: inline; }

Sul vedere il vostro porzione di codice HTML. È possibile utilizzare il seguente CSS per ottenerli online.

.partners img { display: inline; }

fonte

2012-07-03 10:48:39 Starx

Piuttosto che usare inline, che vi deruba di un sacco di controllo che viene fornito con block elementi, o cambiando il loro allineamento verticale, li avrei float:

<html> 
    <head> 
     <style> 
      div.img_holder img 
      { 
       float: left; 
      } 
     </style> 
    </head> 
    <body> 
     <div class = "img_holder"> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
      <img src="" /> 
     </div> 
    </body> 
</html>

galleggiante è un peculiare scienza propria in CSS; vale davvero la pena di imparare in quanto può produrre risultati molto potenti. Ad esempio, se queste divs e non le immagini, utilizzando inline ti impedivano di impostare la loro altezza. Inline influisce anche sul modo in cui funzionano margins e padding. vertical-align è incoerente tra i browser e, se non sbaglio, non dovrebbe in realtà fornire i risultati che stai cercando, a tutti.

fonte

2012-07-03 10:55:03

Ho usato la proprietà float e solo 2 immagini allineate orizzontalmente .... hai qualche suggerimento? – justcode

I float si comportano un po 'come gli elementi inline in quanto si avvolgeranno se il loro genitore non è abbastanza grande. L'impostazione dell'ampiezza dei genitori (nel mio esempio, 'img_holder') nell'appropriato dovrebbe aiutare. In caso contrario, potresti fornire una schermata? Le tue immagini sono ciascuna di 95 pixel di larghezza (secondo quanto sopra) hanno anche margini o riempimento? –

Firts di tutti, in modo da non rovinare le vostre altre immagini probabilmente stai andando ad aggiungere , fare questo:

.Wrapper img{ float: left; }

Questo farà galleggiare tutte le immagini all'interno della classe .Wrapper a sinistra. Se tutte le immagini nella pagina in cui sono chiamati queste regole css saranno allineati a sinistra, fare questo:

.Wrapper img{ float: left; }

EDIT: Aggiungi questa regola .Wrapper

.Wrapper{ width: 100%; }

fonte

2012-07-03 18:49:19 menislici

Ho usato la proprietà float ma solo due delle immagini si allineano orizzontalmente ... – justcode

Come rendere i tag <img> allineati orizzontalmente nel div?

risposta

Problemi correlati