Allinea immagini orizzontalmente CSS

Question

Desidero allineare le mie tre immagini orizzontalmente anziché verticalmente qual è il modo più semplice per raggiungere questo obiettivo? example

<div id="christmas_promotion_boxes"> 
      <div id="christmas_promo_1"> 
       <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
      <div id="christmas_promo_2"> 
      <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
      <div id="christmas_promo_3"> 
       <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"> 
      </div> 
     </div> 

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;} 

Answer 1

display div come inline-block in questo modo:

#christmas_promotion_boxes div { 
    display: inline-block; 
} 

Fiddle

Answer 2

aggiungere questo

#christmas_promotion_boxes div{ 
float: left; 

}

Answer 3

Sono necessarie le div che contengono le immagini da flottare.

aggiungere questa sezione di codice nella tua css:

#christmas_promotion_boxes > *{ 
    float:left; 
} 

http://jsfiddle.net/tDfCR/5/

Answer 4

Quando ho elementi in linea che ho sempre metterli in una ul e visualizzare in linea del li. In questo modo non devi preoccuparti di fluttuare nulla ed è molto più scalabile.

<ul> 
    <li id="christmas_promo_1"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
    <li id="christmas_promo_2"><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
    <li id="christmas_promo_3><img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"></li> 
</ul> 

ul{ 
width:5em 
} 

li{ 
display:inline; 
list-style-type:none; 
} 

Answer 5

Leggermente diverso da @zazvorniki risposta accettata:

<div class="christmas_promotion_boxes"> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
    <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100"/> 
</div> 

.christmas_promotion_boxes { 
    width: 1000px; 
    margin: 0 auto 0 auto; 
    display: inline-block; 
} 

http://jsfiddle.net/tDfCR/114/

Assicurarsi che la width è più grande della somma di tutte le larghezza di tutte le immagini.