Bilder horizontal ausrichten CSS

Question

Ich möchte meine drei Bilder horizontal anstatt vertikal ausrichten, was ist der einfachste Weg, dies zu erreichen? 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

Anzeige der divs als inline-block wie so:

#christmas_promotion_boxes div { 
    display: inline-block; 
} 

Fiddle

Answer 2

hinzufügen, um dieses

#christmas_promotion_boxes div{ 
float: left; 

}

Answer 3

Sie benötigen die divs, die die zu schwebenden Bilder enthalten.

diesen Abschnitt von Code in Ihre CSS hinzufügen:

#christmas_promotion_boxes > *{ 
    float:left; 
} 

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

Answer 4

Wenn ich Inline-Elemente habe ich sie immer in einem ul setzen und die Inline-Li anzuzeigen. Auf diese Weise müssen Sie sich nicht darum kümmern, irgendetwas zu schweben und es ist viel besser skalierbar.

<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

leicht von @zazvorniki akzeptierte Antwort:

<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/

Sicherstellen, dass die width größer ist die Summe aller Breite aller Bilder.